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中常用的55个经典技巧
Aug 12 Javascript
javascript 贪吃蛇实现代码
Nov 22 Javascript
使用js实现关闭js弹出层的窗口
Feb 10 Javascript
javascript中expression的用法整理
May 13 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
Vue实现双向绑定的方法
Dec 22 Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 Javascript
javascript实现文本框标签验证的实例代码
Oct 14 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
Django+Vue实现WebSocket连接的示例代码
May 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新手上路(三)
2006/10/09 PHP
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
php探针不显示内存解决方法
2019/09/17 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
Javascript的IE和Firefox兼容性汇编
2006/07/01 Javascript
javascript生成/解析dom的CDATA类型的字段的代码
2007/04/22 Javascript
js字符编码函数区别分析
2008/06/05 Javascript
基于jquery的loading效果实现代码
2010/11/05 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
Python制作爬虫采集小说
2015/10/25 Python
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
python 获取指定文件夹下所有文件名称并写入列表的实例
2018/04/23 Python
python批量下载抖音视频
2019/06/17 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
优秀的应届生自荐信
2014/05/23 职场文书
党建工作整改措施
2014/10/28 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
2016年清明节寄语
2015/12/04 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
python实现图片批量压缩
2021/04/24 Python
总结Python常用的魔法方法
2021/05/25 Python