首頁  >  文章  >  web前端  >  Javascript 物件導向(二)封裝程式碼

Javascript 物件導向(二)封裝程式碼

高洛峰
高洛峰原創
2017-01-04 09:22:261073瀏覽

寫個小例子: 

第一步:做一個「手機的類" 

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn