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 相关文章推荐
用jquery ajax获取网站Alexa排名的代码
Dec 12 Javascript
JavaScript 对象链式操作测试代码
Apr 25 Javascript
validator验证控件使用代码
Nov 23 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
Mar 19 Javascript
举例讲解AngularJS中的模块
Jun 17 Javascript
jquery自定义表格样式
Nov 23 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
js 作用域和变量详解
Feb 16 Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
ES6中Set和Map用法实例详解
Mar 02 Javascript
angular组件间通讯的实现方法示例
May 07 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 和 MySQL 开发的 8 个技巧
2006/10/09 PHP
PHP 判断常量,变量和函数是否存在
2009/04/26 PHP
php实现的操作excel类详解
2016/01/15 PHP
php中get_object_vars()在数组的实例用法
2021/02/22 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
2012/07/25 Javascript
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
python random从集合中随机选择元素的方法
2019/01/23 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
Python查找不限层级Json数据中某个key或者value的路径方式
2020/02/27 Python
python实现批量命名照片
2020/06/18 Python
PHP如何与mysql建立链接
2013/05/05 面试题
AJAX的全称是什么
2012/11/06 面试题
中药专业大学生医药工作求职信
2013/10/25 职场文书
文秘人员工作职责
2014/01/31 职场文书
入股协议书
2014/04/14 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
车间班组长竞聘书
2015/09/15 职场文书
2016年感恩节寄语
2015/12/07 职场文书
《将心比心》教学反思
2016/02/23 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB