Javascript 面向?qū)ο螅ǘ┓庋b代碼
更新時間：2012年05月23日 17:27:14 作者：
Javascript 面向?qū)ο螅ǘ┓庋b代碼，需要的朋友可以參考下
寫個小例子：
第一步:做一個“手機的類"
var MobilePhone = (function(){
…………
})()
第二步：考慮這個類，里需要那些類的私有屬性，這里我想定義的是實例出來手機的數(shù)量
var MobilePhone = (function(){
//私有屬性
var count = 0; //代表手機的數(shù)量
})()
第三步：創(chuàng)建一個構(gòu)造函數(shù)，即實例時候，對產(chǎn)生的新象的一個初始化，例如屬性，方法的初始化;在這個例子中，每一個手機都會有顏色，大小，價格屬性.這里的構(gòu)造函數(shù)也是一個閉包，所以可以訪問count，并且count的值會長期保存在內(nèi)存中（只要有引用存在）
var MobilePhone = (function(){
//私有屬性
var count = 0; //代表手機的數(shù)量
//構(gòu)造函數(shù)
var creatphone = function(color,size,price){
count++;
this._color = color; //手機的顏色
this._size = size; //手機的大小
this._price = price; //手機的價格
this.index = count; //手機索引，是第幾臺創(chuàng)建的手機手象
}
})()
第四步：共有方法：
即所有實例出來的手機對象，都能使用的方法，這里手機應(yīng)該可以改變價格，顏色，大小，也可以顯示大小，顏色，價格。
這里的共有方法應(yīng)該放在“原型對象”中：
1.所有通過該構(gòu)造函數(shù)實例的對象，也就是造出的手機，都能使用“原型對象”中的方法。
2.如果放在構(gòu)造函數(shù)中，那么每一次實例一個手機對象出來，都會產(chǎn)生一堆重復(fù)的方法，占用內(nèi)存。
3."constructor":creatphone解釋：
因為creatphone.prototype ={……}相當對把之前的原型對象的引用，給復(fù)蓋掉了。而為了讓原型對象和該構(gòu)造函數(shù)關(guān)聯(lián)起來 設(shè)置了"constructor":creatphone,這個屬性.
var MobilePhone = (function(){
//私有屬性
var count = 0;//代表手機的數(shù)量
//構(gòu)造函數(shù)
var creatphone = function(color,size,price){
count++;
this._color = color; //手機的顏色
this._size = size; //手機的大小
this._price = price; //手機的價格
this.index = count; //手機索引，是第幾臺創(chuàng)建的手機手象
}
//公有方法，存放在原型對象中
creatphone.prototype = {
"constructor":creatphone,
//獲取手機顏色
"getColor" : function(){
return this._color;
},
//設(shè)置手機顏色
"setColor" : function(color){
this._color = color;
},
//獲取手機大小
"getSize" : function(){
return "width:"+this._size.width + " height:" + this._size.height;
},
//設(shè)置手機大小
"setSize" : function(size){
this._size.width = size.width;
this._size.height = size.height;
},
//獲取手機價格
"getPrice" : function(){
return this._price;
},
//設(shè)置手機價格
"setPrice" : function(price){
this._price = price
}
}
})()
第五步：特權(quán)方法，即需要有一個方法，能夠去訪問類的私有變量。就是實例出來多少臺手機對象
var MobilePhone = (function(){
//私有屬性
var count = 0;//代表手機的數(shù)量
var index = 0;//代表手機的索引
//構(gòu)造函數(shù)
var creatphone = function(color,size,price){
count++;
this._color = color; //手機的顏色
this._size = size; //手機的大小
this._price = price; //手機的價格
this.index = count; //手機索引，是第幾臺創(chuàng)建的手機手象
} //公有方法，存放在原型對象中
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
}
}
//特權(quán)方法
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的控制臺輸出三星手機對象是第幾臺創(chuàng)建的，即索引；
console.log("HTC是第："+HTC.index+"臺"); //FF的控制臺輸出HTC手機對象是第幾臺創(chuàng)建的，即索引；
console.log("Iphone4s是第："+Iphone4s.index+"臺"); //FF的控制臺輸出個蘋果4S手機對象是第幾臺創(chuàng)建的，即索引；
console.log("總共造出了"+MobilePhone.get_count_index()+"手機"); //FF的控制臺輸出總共創(chuàng)建了幾臺手機；
console.log(anycall.constructor === MobilePhone); //實例出來的對象，的原形象中的constructor，是否還指向MobilePhone
第一步:做一個“手機的類"
復(fù)制代碼 代碼如下:
var MobilePhone = (function(){
…………
})()
第二步：考慮這個類，里需要那些類的私有屬性，這里我想定義的是實例出來手機的數(shù)量
復(fù)制代碼 代碼如下:
var MobilePhone = (function(){
//私有屬性
var count = 0; //代表手機的數(shù)量
})()
第三步：創(chuàng)建一個構(gòu)造函數(shù)，即實例時候，對產(chǎn)生的新象的一個初始化，例如屬性，方法的初始化;在這個例子中，每一個手機都會有顏色，大小，價格屬性.這里的構(gòu)造函數(shù)也是一個閉包，所以可以訪問count，并且count的值會長期保存在內(nèi)存中（只要有引用存在）
復(fù)制代碼 代碼如下:
var MobilePhone = (function(){
//私有屬性
var count = 0; //代表手機的數(shù)量
//構(gòu)造函數(shù)
var creatphone = function(color,size,price){
count++;
this._color = color; //手機的顏色
this._size = size; //手機的大小
this._price = price; //手機的價格
this.index = count; //手機索引，是第幾臺創(chuàng)建的手機手象
}
})()
第四步：共有方法：
即所有實例出來的手機對象，都能使用的方法，這里手機應(yīng)該可以改變價格，顏色，大小，也可以顯示大小，顏色，價格。
這里的共有方法應(yīng)該放在“原型對象”中：
1.所有通過該構(gòu)造函數(shù)實例的對象，也就是造出的手機，都能使用“原型對象”中的方法。
2.如果放在構(gòu)造函數(shù)中，那么每一次實例一個手機對象出來，都會產(chǎn)生一堆重復(fù)的方法，占用內(nèi)存。
3."constructor":creatphone解釋：
因為creatphone.prototype ={……}相當對把之前的原型對象的引用，給復(fù)蓋掉了。而為了讓原型對象和該構(gòu)造函數(shù)關(guān)聯(lián)起來 設(shè)置了"constructor":creatphone,這個屬性.
復(fù)制代碼 代碼如下:
var MobilePhone = (function(){
//私有屬性
var count = 0;//代表手機的數(shù)量
//構(gòu)造函數(shù)
var creatphone = function(color,size,price){
count++;
this._color = color; //手機的顏色
this._size = size; //手機的大小
this._price = price; //手機的價格
this.index = count; //手機索引，是第幾臺創(chuàng)建的手機手象
}
//公有方法，存放在原型對象中
creatphone.prototype = {
"constructor":creatphone,
//獲取手機顏色
"getColor" : function(){
return this._color;
},
//設(shè)置手機顏色
"setColor" : function(color){
this._color = color;
},
//獲取手機大小
"getSize" : function(){
return "width:"+this._size.width + " height:" + this._size.height;
},
//設(shè)置手機大小
"setSize" : function(size){
this._size.width = size.width;
this._size.height = size.height;
},
//獲取手機價格
"getPrice" : function(){
return this._price;
},
//設(shè)置手機價格
"setPrice" : function(price){
this._price = price
}
}
})()
第五步：特權(quán)方法，即需要有一個方法，能夠去訪問類的私有變量。就是實例出來多少臺手機對象
復(fù)制代碼 代碼如下:
var MobilePhone = (function(){
//私有屬性
var count = 0;//代表手機的數(shù)量
var index = 0;//代表手機的索引
//構(gòu)造函數(shù)
var creatphone = function(color,size,price){
count++;
this._color = color; //手機的顏色
this._size = size; //手機的大小
this._price = price; //手機的價格
this.index = count; //手機索引，是第幾臺創(chuàng)建的手機手象
} //公有方法，存放在原型對象中
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
}
}
//特權(quán)方法
creatphone.get_count_index = function(){
return count
}
return creatphone;
})()
用上面封裝的一個手機類 測試
復(fù)制代碼 代碼如下:
var anycall = new MobilePhone(); //實例一個三星手機對象
var HTC = new MobilePhone(); //實例一個HTC手機對象
var Iphone4s = new MobilePhone(); //實例一個蘋果4S手機對象
console.log("三星是第："+anycall.index+"臺"); //FF的控制臺輸出三星手機對象是第幾臺創(chuàng)建的，即索引；
console.log("HTC是第："+HTC.index+"臺"); //FF的控制臺輸出HTC手機對象是第幾臺創(chuàng)建的，即索引；
console.log("Iphone4s是第："+Iphone4s.index+"臺"); //FF的控制臺輸出個蘋果4S手機對象是第幾臺創(chuàng)建的，即索引；
console.log("總共造出了"+MobilePhone.get_count_index()+"手機"); //FF的控制臺輸出總共創(chuàng)建了幾臺手機；
console.log(anycall.constructor === MobilePhone); //實例出來的對象，的原形象中的constructor，是否還指向MobilePhone
結(jié)果如下，全完正確：
相關(guān)文章
構(gòu)造函數(shù) + 原型 直接組裝一個類；同一構(gòu)造函數(shù)將組裝出同一類型2009-07-07
其實我自己也就能簡單用用js而已，但是呢，相對很多初學(xué)者來說多懂了點Know How所以斗膽孟浪一下，將一些所得記錄下來，以供更多的初學(xué)者能夠知道一個東西的實現(xiàn)過程，省去在源碼里摸索的過程。2010-09-09
JavaScript是一門OOP，而有些人說，JavaScript是基于對象的。
2008-07-07 
