寫個小例子:
第一步:做一個“手機的類"
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
結果如下,全完正確: