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 EasyPager 分页函数
May 25 Javascript
JavaScript 高级篇之函数 (四)
Apr 07 Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
May 17 Javascript
js操作浏览器的参数方法
Jan 21 Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
在微信小程序中渲染HTML内容的方法示例
Sep 28 Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 Javascript
JSONP 的原理、理解 与 实例分析
May 16 Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 Javascript
使用vuex-persistedstate本地存储vuex
Apr 29 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获得当前的脚本网址
2007/12/10 PHP
php curl选项列表(超详细)
2013/07/01 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
js window.event对象详尽解析
2009/02/17 Javascript
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
js简易版购物车功能
2017/06/17 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
python实现逆波兰计算表达式实例详解
2015/05/06 Python
Python 自动刷博客浏览量实例代码
2017/06/14 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
django框架forms组件用法实例详解
2019/12/10 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
高中生校园生活自我评价
2013/09/19 职场文书
环境科学专业大学生自荐信格式
2013/09/21 职场文书
通用自荐信范文
2014/03/14 职场文书
考核工作实施方案
2014/03/30 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
离退休人员聘用协议书
2014/11/24 职场文书
小学大队委竞选口号
2015/12/25 职场文书