Javascript 面向对象(二)封装代码


Posted in Javascript onMay 23, 2012

写个小例子:

第一步:做一个“手机的类"

var MobilePhone = (function(){ 

………… 
})()

第二步:考虑这个类,里需要那些类的私有属性,这里我想定义的是实例出来手机的数量

var MobilePhone = (function(){ 
//私有属性 
var count = 0; //代表手机的数量 
})()

第三步:创建一个构造函数,即实例时候,对产生的新象的一个初始化,例如属性,方法的初始化;在这个例子中,每一个手机都会有颜色,大小,价格属性.这里的构造函数也是一个闭包,所以可以访问count,并且count的值会长期保存在内存中(只要有引用存在)

var MobilePhone = (function(){ 
//私有属性 
var count = 0; //代表手机的数量 

 


//构造函数 


var creatphone = function(color,size,price){ 




count++; 




this._color = color; //手机的颜色 




this._size = size; //手机的大小 




this._price = price; //手机的价格 




this.index = count; //手机索引,是第几台创建的手机手象 


 } 
})()

第四步:共有方法:
即所有实例出来的手机对象,都能使用的方法,这里手机应该可以改变价格,颜色,大小,也可以显示大小,颜色,价格。
这里的共有方法应该放在“原型对象”中:
1.所有通过该构造函数实例的对象,也就是造出的手机,都能使用“原型对象”中的方法。
2.如果放在构造函数中,那么每一次实例一个手机对象出来,都会产生一堆重复的方法,占用内存。
3."constructor":creatphone解释:
因为creatphone.prototype ={……}相当对把之前的原型对象的引用,给复盖掉了。而为了让原型对象和该构造函数关联起来 设置了"constructor":creatphone,这个属性.
var MobilePhone = (function(){ 
//私有属性 
var count = 0;//代表手机的数量 

//构造函数 


 var creatphone = function(color,size,price){ 




count++; 




this._color = color; //手机的颜色 




this._size = size; //手机的大小 




this._price = price; //手机的价格 




this.index = count; //手机索引,是第几台创建的手机手象 
  

} 
//公有方法,存放在原型对象中 
creatphone.prototype = { 



"constructor":creatphone, 



//获取手机颜色 
"getColor" : function(){ 
return this._color; 
}, 



//设置手机颜色 
"setColor" : function(color){ 
this._color = color; 
}, 



//获取手机大小 
"getSize" : function(){ 
return "width:"+this._size.width + " height:" + this._size.height; 
}, 



//设置手机大小 
"setSize" : function(size){ 
this._size.width = size.width; 
this._size.height = size.height; 
}, 



//获取手机价格 
"getPrice" : function(){ 
return this._price; 
}, 



//设置手机价格 
"setPrice" : function(price){ 
this._price = price 
} 
} 
})()

第五步:特权方法,即需要有一个方法,能够去访问类的私有变量。就是实例出来多少台手机对象
var MobilePhone = (function(){ 
//私有属性 
var count = 0;//代表手机的数量 
var index = 0;//代表手机的索引 

//构造函数 


var creatphone = function(color,size,price){ 




count++; 




this._color = color; //手机的颜色 




this._size = size; //手机的大小 




this._price = price; //手机的价格 




this.index = count; //手机索引,是第几台创建的手机手象 



}

 //公有方法,存放在原型对象中 
creatphone.prototype = { 
"constructor":creatphone, 
"getColor" : function(){ 
return this._color; 
}, 
"setColor" : function(color){ 
this._color = color; 
}, 
"getSize" : function(){ 
return "width:"+this._size.width + " height:" + this._size.height; 
}, 
"setSize" : function(size){ 
this._size.width = size.width; 
this._size.height = size.height; 
}, 
"getPrice" : function(){ 
return this._price; 
}, 
"setPrice" : function(price){ 
this._price = price 
} 
} 
//特权方法 
creatphone.get_count_index = function(){ 
return count 
} 
return creatphone; 
})()

用上面封装的一个手机类 测试
var anycall = new MobilePhone(); //实例一个三星手机对象 
var HTC = new MobilePhone(); //实例一个HTC手机对象 
var Iphone4s = new MobilePhone(); //实例一个苹果4S手机对象 
console.log("三星是第:"+anycall.index+"台"); //FF的控制台输出三星手机对象是第几台创建的,即索引; 
console.log("HTC是第:"+HTC.index+"台"); //FF的控制台输出HTC手机对象是第几台创建的,即索引; 
console.log("Iphone4s是第:"+Iphone4s.index+"台"); //FF的控制台输出个苹果4S手机对象是第几台创建的,即索引; 
console.log("总共造出了"+MobilePhone.get_count_index()+"手机"); //FF的控制台输出总共创建了几台手机; 
console.log(anycall.constructor === MobilePhone); //实例出来的对象,的原形象中的constructor,是否还指向MobilePhone

结果如下,全完正确:

Javascript 面向对象(二)封装代码

Javascript 相关文章推荐
JavaScript中的Location地址对象
Jan 16 Javascript
点击文章内容处弹出页面代码
Oct 01 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
Dec 16 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
Jun 22 Javascript
Javascript之深入浅出prototype
Feb 06 Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 Javascript
JavaScript ES6中export、import与export default的用法和区别
Mar 14 Javascript
简单谈谈js的数据类型
Sep 25 Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 Javascript
js实现下拉框二级联动
Dec 04 Javascript
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
May 23 #Javascript
Javascript 闭包引起的IE内存泄露分析
May 23 #Javascript
基于jQuery的图片左右无缝滚动插件
May 23 #Javascript
判断多个input type=file是否有已经选择好文件的代码
May 23 #Javascript
jQuery 1.7.2中getAll方法的疑惑分析
May 23 #Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
May 23 #Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
May 23 #Javascript
You might like
PHP学习之PHP变量
2006/10/09 PHP
PHP第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
2016/06/27 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
JavaScript注册时密码强度校验代码
2017/06/30 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
Python发送邮件测试报告操作实例详解
2018/12/08 Python
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
竞选学习委员演讲稿
2014/04/28 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis