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 相关文章推荐
分享别人写的一个小型js框架
Aug 13 Javascript
jquery Firefox3.5中操作select的问题
Jul 10 Javascript
给jQuery方法添加回调函数一款插件的应用
Jan 21 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
javascript正则表达式总结
Feb 29 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
javascript 易错知识点实例小结
Apr 25 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 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设置进度条的方法
2015/07/08 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
php微信公众号开发之简答题
2018/10/20 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
js实现简单的轮播图效果
2020/12/13 Javascript
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
解决python写的windows服务不能启动的问题
2014/04/15 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
Python 逐行分割大txt文件的方法
2017/10/10 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
佳能英国官方网站:Canon UK
2017/08/08 全球购物
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
户外用品商店创业计划书
2014/01/29 职场文书
原材料检验岗位职责
2014/03/15 职场文书
网吧消防安全责任书
2014/07/29 职场文书
2015年银行柜员工作总结报告
2015/04/01 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
导游词之桂林山水
2019/09/20 职场文书
基于python实现银行管理系统
2021/04/20 Python
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js