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 相关文章推荐
jQuery.extend 函数的详细用法
Jun 27 Javascript
div中文字内容溢出常见的解决方法
Mar 16 Javascript
如何使node也支持从url加载一个module详解
Jun 05 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 Javascript
JavaScript模板引擎实现原理实例详解
Dec 14 Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 Javascript
通过实例解析JavaScript for in及for of区别
Jun 15 Javascript
vue 调用 RESTful风格接口操作
Aug 11 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 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
php 图片上传类代码
2009/07/17 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
jquery下json数组的操作实现代码
2010/08/09 Javascript
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
js微信支付实现代码
2016/12/22 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
深入理解Node module模块
2018/03/26 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
[01:34]2016国际邀请赛中国区预选赛IG战队教练采访
2016/06/27 DOTA
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
轻松掌握python设计模式之策略模式
2016/11/18 Python
分分钟入门python语言
2018/03/20 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
详解Python GUI编程之PyQt5入门到实战
2020/12/10 Python
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
请解释接口的显式实现有什么意义
2012/05/26 面试题
某同学的自我鉴定范文
2013/12/26 职场文书
装饰资料员岗位职责
2013/12/30 职场文书
养殖行业的创业计划书
2014/01/05 职场文书
降消项目实施方案
2014/03/30 职场文书
电子商务专业毕业生求职信
2014/06/12 职场文书
中职生求职信
2014/07/01 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
教师外出学习心得体会
2016/01/18 职场文书