JavaScript面向对象封装:私有属性、构造函数与原型链详解
本文详细解析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之面向对象--方法》。感谢对本站的支持!
5款主流JS在线运行工具对比:CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
JavaScript函数定义的三种方式:声明、表达式与箭头函数
2026-11-05 13:50:55
