Javascript 面向?qū)ο?（聲明篇）
更新時(shí)間：2010年04月30日 14:58:21 作者：
有時(shí)間重新審視了遍 Javascript 的面向?qū)ο髾C(jī)制。與其他的語(yǔ)言不同，Javascript 可以說(shuō)提供了更靈活的面向?qū)ο髾C(jī)制（比如 function 在完成其自身功能的同時(shí)也是對(duì)象）。
由于才疏學(xué)淺，我不得不將《Javascript 高級(jí)程序設(shè)計(jì)》中的部分內(nèi)容摘抄過來(lái)，這些同時(shí)也算是我的讀書筆記吧。由于 Javascript 面向?qū)ο髾C(jī)制及其的重要，而且內(nèi)容非常的繁多，在這里就分篇章逐個(gè)介紹。
使用對(duì)象首先就是聲明它（內(nèi)置的對(duì)象當(dāng)然就不需要了）。該死的 Javascript 總是會(huì)讓我們死去很多的腦細(xì)胞，這篇文章主要說(shuō)明下聲明 Javascript 類的幾種方法。
工廠模式
工廠模式可能是很多開發(fā)人員使用的一種模式，簡(jiǎn)單的說(shuō)這種方法先定義“地基”，然后在往上面扔（綁定）各種功能和屬性。下面的代碼可能看起來(lái)會(huì)非常的熟悉：
var oCar = new Object;
oCar.color = "red";
oCar.showColor = function() {
alert(this.color);
}
oCar.showColor();
當(dāng)然，既然包裝成一個(gè)類，就要重用它（上面的方法從語(yǔ)法上說(shuō)僅僅是變量）。可以使用返回特定對(duì)象的工廠函數(shù)（factory function）將其封裝起來(lái)：
function createCar() {
var oCar = new Object;
oCar.color = "red";
oCar.showColor = function() {
alert(this.color);
}
return oCar;
}
oCar = createCar();
oCar.showColor();
當(dāng)然，變通一下，可以在 createCar 函數(shù)上加入些參數(shù)，這樣看起來(lái)已經(jīng)非常地專業(yè)了：
function createCar(sColor) {
var oCar = new Object;
oCar.color = sColor;
oCar.showColor = function() {
alert(this.color);
}
return oCar;
}
oCar = createCar();
oCar.showColor();
匿名函數(shù)總是讓人感覺非常的高深，但是有時(shí)候也會(huì)迷惑了自己。如果不考慮篇幅，可以外部定義它：
function showColor() {
alert(this.color);
}
function createCar(sColor) {
var oCar = new Object;
oCar.color = sColor;
oCar.showColor = showColor;
return oCar;
}
oCar = createCar();
oCar.showColor();
這樣做還有一個(gè)好處，就是不用重復(fù)定義 oCar.showColor 了（高效率的程序每個(gè)人都喜歡）。
構(gòu)造函數(shù)模式
構(gòu)造函數(shù)其實(shí)和工廠方式差不多。從代碼量上來(lái)說(shuō)，就是省略了構(gòu)造函數(shù)內(nèi)部沒有創(chuàng)建一個(gè)對(duì)象。
function Car(sColor) {
this.color = sColor;
this.showColor = function () {
alert(this.color);
}
}
oCar = new Car("red");
oCar.showColor();
其實(shí)此隱含的對(duì)象已經(jīng)在 new 以后就被實(shí)例化了。默認(rèn)情況下，構(gòu)造函數(shù)返回的就是其 this 的值（所以不必使用 return 返回）。但構(gòu)造函數(shù)模式和工廠模式一樣可能會(huì)重復(fù)定義方法，這點(diǎn)可以參考上述工廠模式的做法避免它（始終看起來(lái)不完美）。
原型模式
已經(jīng)受夠重復(fù)定義的問題了，那么有沒有完美的解決辦法呢？當(dāng)然有。使用原型方法可以有效的避免此類的問題。
function Car() {}
Car.prototype.color = new Array("red", "green", "blue");
Car.prototype.showColor = function() {
alert(this.color);
}
oCar = new Car();
oCar.showColor();
但是使用此模式需要注意的是類中的所有屬性和方法都是共用的（其實(shí)就是指針）。這意味著雖然被實(shí)例化的兩個(gè)變量，如果其中一處的值被更改，那么另外一個(gè)就也會(huì)被更改。
注：此段內(nèi)容有更改，詳細(xì)請(qǐng)參見這里和這里（感謝 fish 兄弟提出）。
混合模式
看起來(lái)越來(lái)越完美了，結(jié)合上述學(xué)到的方法就很容易解決原型模式的問題，這樣看起來(lái)就更像是專業(yè)的程序員了。
function Car(sColor) {
this.color = sColor;
}
Car.prototype.showColor = function() {
alert(this.color);
}
oCar = new Car("red");
oCar.showColor();
上述的方法聲明的類， showColor 方法是原型（僅創(chuàng)建了一個(gè)實(shí)例），其他的都是構(gòu)造（互不干擾）。
動(dòng)態(tài)原型模式
把自己的方法仍在外面總不是件非常環(huán)保的事情，下面的方法就非常的“綠色”：
function Car() {
this.color = "red";
if (typeof Car._initialized == "undefined") {
Car.prototype.showColor = function() {
alert(this.color);
};
Car._initialized = true;
}
}
oCar = new Car("red");
oCar.showColor();
此方法于上述的混合模式效果一致，即在構(gòu)造函數(shù)內(nèi)定義屬性，而方法則使用原型模式。唯一的區(qū)別就是賦予對(duì)象方法的位置。
混合工廠模式
混合工廠模式可以認(rèn)為是構(gòu)造模式與混合模式的整合，因?yàn)?function 本身就是一個(gè)對(duì)象，所以可以使用 new 來(lái)實(shí)例化（請(qǐng)?jiān)试S我這樣描述）。
function Car() {
var oCar = new Object;
oCar.color = "red";
oCar.showColor = function() {
alert(this.color);
}
return oCar;
}
oCar = new Car();
oCar.showColor();
不過建議避免使用此方法定義，因?yàn)橛谏鲜龅墓S模式一樣，它存在重復(fù)聲明的問題。
選用何種模式？
其實(shí)通過上面的描述已經(jīng)有所結(jié)果，通常使用的是 混合模式 與 動(dòng)態(tài)原型模式 （我個(gè)人投動(dòng)態(tài)原型模式一票）。不過不要單獨(dú)使用 工廠模式 與 構(gòu)造模式 （或者其兩者的結(jié)合體），因?yàn)檫@樣會(huì)造成不必要的浪費(fèi)。
測(cè)試代碼
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
使用對(duì)象首先就是聲明它（內(nèi)置的對(duì)象當(dāng)然就不需要了）。該死的 Javascript 總是會(huì)讓我們死去很多的腦細(xì)胞，這篇文章主要說(shuō)明下聲明 Javascript 類的幾種方法。
工廠模式
工廠模式可能是很多開發(fā)人員使用的一種模式，簡(jiǎn)單的說(shuō)這種方法先定義“地基”，然后在往上面扔（綁定）各種功能和屬性。下面的代碼可能看起來(lái)會(huì)非常的熟悉：
復(fù)制代碼 代碼如下:
var oCar = new Object;
oCar.color = "red";
oCar.showColor = function() {
alert(this.color);
}
oCar.showColor();
當(dāng)然，既然包裝成一個(gè)類，就要重用它（上面的方法從語(yǔ)法上說(shuō)僅僅是變量）。可以使用返回特定對(duì)象的工廠函數(shù)（factory function）將其封裝起來(lái)：
復(fù)制代碼 代碼如下:
function createCar() {
var oCar = new Object;
oCar.color = "red";
oCar.showColor = function() {
alert(this.color);
}
return oCar;
}
oCar = createCar();
oCar.showColor();
當(dāng)然，變通一下，可以在 createCar 函數(shù)上加入些參數(shù)，這樣看起來(lái)已經(jīng)非常地專業(yè)了：
復(fù)制代碼 代碼如下:
function createCar(sColor) {
var oCar = new Object;
oCar.color = sColor;
oCar.showColor = function() {
alert(this.color);
}
return oCar;
}
oCar = createCar();
oCar.showColor();
匿名函數(shù)總是讓人感覺非常的高深，但是有時(shí)候也會(huì)迷惑了自己。如果不考慮篇幅，可以外部定義它：
復(fù)制代碼 代碼如下:
function showColor() {
alert(this.color);
}
function createCar(sColor) {
var oCar = new Object;
oCar.color = sColor;
oCar.showColor = showColor;
return oCar;
}
oCar = createCar();
oCar.showColor();
這樣做還有一個(gè)好處，就是不用重復(fù)定義 oCar.showColor 了（高效率的程序每個(gè)人都喜歡）。
構(gòu)造函數(shù)模式
構(gòu)造函數(shù)其實(shí)和工廠方式差不多。從代碼量上來(lái)說(shuō)，就是省略了構(gòu)造函數(shù)內(nèi)部沒有創(chuàng)建一個(gè)對(duì)象。
復(fù)制代碼 代碼如下:
function Car(sColor) {
this.color = sColor;
this.showColor = function () {
alert(this.color);
}
}
oCar = new Car("red");
oCar.showColor();
其實(shí)此隱含的對(duì)象已經(jīng)在 new 以后就被實(shí)例化了。默認(rèn)情況下，構(gòu)造函數(shù)返回的就是其 this 的值（所以不必使用 return 返回）。但構(gòu)造函數(shù)模式和工廠模式一樣可能會(huì)重復(fù)定義方法，這點(diǎn)可以參考上述工廠模式的做法避免它（始終看起來(lái)不完美）。
原型模式
已經(jīng)受夠重復(fù)定義的問題了，那么有沒有完美的解決辦法呢？當(dāng)然有。使用原型方法可以有效的避免此類的問題。
復(fù)制代碼 代碼如下:
function Car() {}
Car.prototype.color = new Array("red", "green", "blue");
Car.prototype.showColor = function() {
alert(this.color);
}
oCar = new Car();
oCar.showColor();
但是使用此模式需要注意的是類中的所有屬性和方法都是共用的（其實(shí)就是指針）。這意味著雖然被實(shí)例化的兩個(gè)變量，如果其中一處的值被更改，那么另外一個(gè)就也會(huì)被更改。
注：此段內(nèi)容有更改，詳細(xì)請(qǐng)參見這里和這里（感謝 fish 兄弟提出）。
混合模式
看起來(lái)越來(lái)越完美了，結(jié)合上述學(xué)到的方法就很容易解決原型模式的問題，這樣看起來(lái)就更像是專業(yè)的程序員了。
復(fù)制代碼 代碼如下:
function Car(sColor) {
this.color = sColor;
}
Car.prototype.showColor = function() {
alert(this.color);
}
oCar = new Car("red");
oCar.showColor();
上述的方法聲明的類， showColor 方法是原型（僅創(chuàng)建了一個(gè)實(shí)例），其他的都是構(gòu)造（互不干擾）。
動(dòng)態(tài)原型模式
把自己的方法仍在外面總不是件非常環(huán)保的事情，下面的方法就非常的“綠色”：
復(fù)制代碼 代碼如下:
function Car() {
this.color = "red";
if (typeof Car._initialized == "undefined") {
Car.prototype.showColor = function() {
alert(this.color);
};
Car._initialized = true;
}
}
oCar = new Car("red");
oCar.showColor();
此方法于上述的混合模式效果一致，即在構(gòu)造函數(shù)內(nèi)定義屬性，而方法則使用原型模式。唯一的區(qū)別就是賦予對(duì)象方法的位置。
混合工廠模式
混合工廠模式可以認(rèn)為是構(gòu)造模式與混合模式的整合，因?yàn)?function 本身就是一個(gè)對(duì)象，所以可以使用 new 來(lái)實(shí)例化（請(qǐng)?jiān)试S我這樣描述）。
復(fù)制代碼 代碼如下:
function Car() {
var oCar = new Object;
oCar.color = "red";
oCar.showColor = function() {
alert(this.color);
}
return oCar;
}
oCar = new Car();
oCar.showColor();
不過建議避免使用此方法定義，因?yàn)橛谏鲜龅墓S模式一樣，它存在重復(fù)聲明的問題。
選用何種模式？
其實(shí)通過上面的描述已經(jīng)有所結(jié)果，通常使用的是 混合模式 與 動(dòng)態(tài)原型模式 （我個(gè)人投動(dòng)態(tài)原型模式一票）。不過不要單獨(dú)使用 工廠模式 與 構(gòu)造模式 （或者其兩者的結(jié)合體），因?yàn)檫@樣會(huì)造成不必要的浪費(fèi)。
測(cè)試代碼
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
相關(guān)文章
用JavaScript實(shí)現(xiàn)單繼承和多繼承的簡(jiǎn)單方法
JavaScript是一種強(qiáng)大的多泛型編程語(yǔ)言，其融合了面向過程、面向?qū)ο蠛秃瘮?shù)式編程于一身，具備強(qiáng)大的表現(xiàn)能力。2009-03-03
這兩天幫同學(xué)做秒殺網(wǎng)，打算將前臺(tái)和后臺(tái)徹底分離，僅用ajax通信。這樣就免不了大量的使用javascript，于是發(fā)現(xiàn)，js果然是難學(xué)難用。2011-06-06
JavaScript 基于原型的對(duì)象（創(chuàng)建、調(diào)用）
在我們寫js代碼的時(shí)候，內(nèi)部對(duì)象是不可避免的要引用，但是光靠這些對(duì)象是不夠的，所以需要我們自己定義對(duì)象，這個(gè)時(shí)候通常用到的對(duì)象是第三種，即基于原型的對(duì)象，下面就如何創(chuàng)建自己的對(duì)象，定義對(duì)象的方法、屬性，調(diào)用對(duì)象給出詳細(xì)的說(shuō)明。2009-10-10
javascript面向?qū)ο笕腴T基礎(chǔ)詳細(xì)介紹
本文章介紹了js中常用的對(duì)象包括有JavaScript對(duì)象簡(jiǎn)介 字符串對(duì)象 date() 數(shù)組 數(shù)學(xué)對(duì)象 函數(shù)對(duì)象 應(yīng)用介紹，有需要了解的同學(xué)可參考一下2012-09-09
JavaScript定義類或函數(shù)的幾種方式小結(jié)
js中不論是定義類或者函數(shù)，很多朋友想將代碼寫的更專業(yè)，更方便擴(kuò)展等，那么就可以參考這篇文章了，最好是總結(jié)，建議大家收藏下。2011-01-01
最近這一段時(shí)間事情太多了，沒有時(shí)間再繼續(xù)寫，幸好這兩天有點(diǎn)小閑，先小寫一下JavaScript中面向?qū)ο笠恢型扑]的方法。2010-05-05
學(xué)習(xí)javascript 對(duì)象操作的朋友可以參考下，這個(gè)是入門級(jí)教程。2010-04-04
手把手教你自己寫一個(gè)js表單驗(yàn)證框架的方法
其實(shí)我自己也就能簡(jiǎn)單用用js而已，但是呢，相對(duì)很多初學(xué)者來(lái)說(shuō)多懂了點(diǎn)Know How所以斗膽孟浪一下，將一些所得記錄下來(lái)，以供更多的初學(xué)者能夠知道一個(gè)東西的實(shí)現(xiàn)過程，省去在源碼里摸索的過程。2010-09-09
研究javascript是很有意思的事情，以前我說(shuō)過，在javascript中的繼承，在于維持prototype指向同一object就行了，確實(shí)這樣2012-01-01
javascript最常用與實(shí)用的創(chuàng)建類的代碼
組合構(gòu)造函數(shù)模式和原型模式2010-08-08