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代码[翻译]
Feb 12 Javascript
JS的事件绑定深入认识
Jun 26 Javascript
javascript实现Table排序的方法
May 15 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 Javascript
angular-ui-sortable实现可拖拽排序列表
Dec 28 Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
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
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
javascript 对象定义方法 简单易学
2009/03/22 Javascript
javascript dom 操作详解 js加强
2009/07/13 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
jQuery获取多种input值的简单实现方法
2016/06/20 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
python先序遍历二叉树问题
2017/11/10 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
将keras的h5模型转换为tensorflow的pb模型操作
2020/05/25 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
英国电器零售商:PRC Direct
2018/06/21 全球购物
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
DNA基因检测和分析:23andMe
2019/05/01 全球购物
电气工程自动化求职信
2014/03/14 职场文书
大连星海广场导游词
2015/02/10 职场文书
详解thinkphp的Auth类认证
2021/05/28 PHP
Python实战之OpenCV实现猫脸检测
2021/06/26 Python
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android