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 组件之旅(一)分析和设计
Oct 28 Javascript
javascript中用星号表示预录入内容的实现代码
Jan 08 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
js实现三张图(文)片一起切换的banner焦点图
Aug 25 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
Oct 10 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 Javascript
微信小程序音乐播放器开发
Nov 20 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 Javascript
js实现石头剪刀布游戏
Oct 11 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学习笔记 数组遍历实现代码
2011/06/09 PHP
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
使用Node.js在深度学习中做图片预处理的方法
2019/09/18 Javascript
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
Python脚本获取操作系统版本信息
2016/12/17 Python
pytorch cnn 识别手写的字实现自建图片数据
2018/05/20 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
澳大利亚在线购买儿童玩具:Toy Universe
2017/12/28 全球购物
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
中介公司区域经理岗位职责范本
2014/03/02 职场文书
2014年五一促销活动方案
2014/03/09 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
高中体育课教学反思
2016/02/16 职场文书
二年级数学教学反思
2016/02/16 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
Python代码风格与编程习惯重要吗?
2021/06/03 Python
python通过函数名调用函数的几种方法总结
2021/06/07 Python
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫