Javascript 面向对象（二）封装代码-js教程-PHP中文网

Javascript 面向对象（二）封装代码

高洛峰

发布： 2017-01-04 09:22:26

原创

1220人浏览过

写个小例子：

第一步:做一个“手机的类"

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 
} 
} 
})()

登录后复制

第五步：特权方法，即需要有一个方法，能够去访问类的私有变量。就是实例出来多少台手机对象

立即学习“Java免费学习笔记（深入）”；

AI封面生成器

专业的AI封面生成工具，支持小红书、公众号、小说、红包、视频封面等多种类型，一键生成高质量封面图片。

108

查看详情

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 面向对象（二）封装代码