本文详细解析JavaScript中面向对象的封装实现。通过定义私有属性count统计实例数量，利用闭包保持状态。介绍如何在构造函数中初始化公有属性，并将方法挂载至原型对象以节省内存。同时讲解constructor属性的作用及特权方法访问私有变量的机制，结合代码示例展示完整封装流程。
JavaScript面向对象封装基础
第一步：构建一个代表手机的类。
var MobilePhone = (function(){
…………
})()第二步：分析该类所需的私有属性。在此示例中，我们需要定义一个用于统计实例化手机数量的私有变量。
var MobilePhone = (function(){
//私有属性
var count = 0; //代表手机的数量
})()
第三步：创建构造函数，用于实例化新对象时的初始化操作，包括属性和方法的定义。在本例中，每部手机都具备颜色、尺寸和价格属性。由于构造函数是一个闭包，它可以访问私有变量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之面向对象--方法》。感谢对本站的支持！