Home  >  Article  >  Web Front-end  >  Javascript 面向对象(二)封装代码_js面向对象

Javascript 面向对象(二)封装代码_js面向对象

WBOY
WBOYOriginal
2016-05-16 17:53:22748browse

写个小例子:

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

复制代码 代码如下:

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

结果如下,全完正确:

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn