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 相关文章推荐
图片连续滚动代码[兼容IE/firefox]
Jun 11 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
js根据日期判断星座的示例代码
Jan 23 Javascript
基于编写jQuery的无缝滚动插件
Aug 02 Javascript
javascript中in运算符用法分析
Apr 28 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
微信小程序实现多宫格抽奖活动
Apr 15 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 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
一个oracle+PHP的查询的例子
2006/10/09 PHP
一个查看session内容的函数
2006/10/09 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
ExtJS的拖拽效果示例
2013/12/09 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
2020/08/10 Javascript
[02:05]2014DOTA2西雅图邀请赛 专访啸天mik夫妻档
2014/07/08 DOTA
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
django创建自定义模板处理器的实例详解
2017/08/14 Python
浅谈pyqt5中信号与槽的认识
2019/02/17 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
Python configparser模块常用方法解析
2020/05/22 Python
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
毕业生自我鉴定范文
2013/11/08 职场文书
触摸春天教学反思
2014/02/03 职场文书
趣味活动策划方案
2014/02/08 职场文书
人资专员岗位职责
2014/04/04 职场文书
2014年管理工作总结
2014/11/22 职场文书
2015年银行柜员工作总结报告
2015/04/01 职场文书