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 相关文章推荐
prototype 1.5相关知识及他人笔记
Dec 16 Javascript
JavaScript常用对象的方法和属性小结
Jan 24 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
js解析json读取List中的实体对象示例
Mar 11 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
js简单实现标签云效果实例
Aug 06 Javascript
js实现简单排列组合的方法
Jan 27 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
Vue框架之goods组件开发详解
Jan 25 Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 Javascript
JS使用正则表达式提交页面验证的代码
Oct 16 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 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与数据库代码开发规范
2013/08/08 PHP
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
js二级地域选择的实现方法
2013/06/17 Javascript
jquery、js操作checkbox全选反选
2014/03/12 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
让 python 命令行也可以自动补全
2014/11/30 Python
Python的Flask框架的简介和安装方法
2015/11/13 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
Pandas分组与排序的实现
2019/07/23 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
Python使用python-docx读写word文档
2019/08/26 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
详解如何修改python中字典的键和值
2020/09/29 Python
Django框架请求生命周期实现原理
2020/11/13 Python
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
机械个人求职信范文
2014/01/24 职场文书
学生打架检讨书
2014/02/14 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书
南京南京观后感
2015/06/02 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js