Javascript 面向对象(二)封装代码_Javascript教程-查字典教程网
Javascript 面向对象(二)封装代码
Javascript 面向对象(二)封装代码
发布时间:2016-12-30 来源:查字典编辑
摘要:写个小例子:第一步:做一个“手机的类"复制代码代码如下:varMobilePhone=(function(){…………})()第二步:考虑这...

写个小例子:

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

复制代码 代码如下:

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教程学习
    编程开发子分类