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 尚未实现错误解决办法
Nov 27 Javascript
利用jquery操作select下拉列表框的代码
Jun 04 Javascript
JQuery 在线引用及测试引用是否成功
Jun 24 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
JS实现的页面自定义滚动条效果
Oct 26 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
更靠谱的H5横竖屏检测方法(js代码)
Sep 13 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
JS中使用media实现响应式布局
Aug 04 Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
自定义Vue中的v-module双向绑定的实现
Apr 17 Javascript
JavaScript实现简单的弹窗效果
May 19 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 防恶意刷新实现代码
2010/05/16 PHP
利用curl抓取远程页面内容的示例代码
2013/07/23 PHP
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
2016/05/04 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
2018/02/10 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
vue-router中的hash和history两种模式的区别
2018/07/17 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
python使用cPickle模块序列化实例
2014/09/25 Python
Python计算程序运行时间的方法
2014/12/13 Python
Python操作串口的方法
2015/06/17 Python
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
某同学的自我鉴定范文
2013/12/26 职场文书
小学教师寄语大全
2014/04/03 职场文书
大学生就业策划书范文
2014/04/04 职场文书
令人印象深刻的自荐信
2014/05/25 职场文书
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android
Python使用MapReduce进行简单的销售统计
2022/04/22 Python