Javascript 物件導向 （聲明篇）

由於才疏學淺，我不得不將《Javascript 進階程式設計》中的部分內容摘抄過來，這些同時也算是我的讀書筆記吧。由於 Javascript 物件導向機制及其的重要，而且內容非常的繁多，在這裡就分篇章逐個介紹。

使用對象首先就是聲明它（內建的對象當然就不需要了）。該死的 Javascript 總是會讓我們死去很多的腦細胞，這篇文章主要說明下聲明 Javascript 類的幾種方法。

原廠模式
原廠模式可能是很多開發人員使用的一種模式，簡單的說這種方法先定義“地基”，然後在往上面扔（綁定）各種功能和屬性。下面的代碼可能看起來會非常的熟悉：

複製代碼 代碼如下:var oCar = new Object;
oCar.color = "red";
oCar.showColor = function() {
alert(this.color);
}
oCar.showColor();

當然，既然封裝成一個類，就要重用它（上面的方法從文法上說僅僅是變數）。可以使用返回特定對象的工廠函數（factory function）將其封裝起來： 複製代碼 代碼如下:function createCar() {
var oCar = new Object;
oCar.color = "red";
oCar.showColor = function() {
alert(this.color);
}

return oCar;
}
oCar = createCar();
oCar.showColor();

當然，變通一下，可以在 createCar 函數上加入些參數，這樣看起來已經非常地專業了： 複製代碼 代碼如下:function createCar(sColor) {
var oCar = new Object;
oCar.color = sColor;
oCar.showColor = function() {
alert(this.color);
}

return oCar;
}
oCar = createCar();
oCar.showColor();

匿名函數總是讓人感覺非常的高深，但是有時候也會迷惑了自己。如果不考慮篇幅，可以外部定義它： 複製代碼 代碼如下:function showColor() {
alert(this.color);
}

function createCar(sColor) {
var oCar = new Object;
oCar.color = sColor;
oCar.showColor = showColor;

return oCar;
}
oCar = createCar();
oCar.showColor();

這樣做還有一個好處，就是不用重複定義 oCar.showColor 了（高效率的程式每個人都喜歡）。

建構函式模式
建構函式其實和工廠方式差不多。從代碼量上來說，就是省略了建構函式內部沒有建立一個對象。 複製代碼 代碼如下:function Car(sColor) {
this.color = sColor;
this.showColor = function () {
alert(this.color);
}
}
oCar = new Car("red");
oCar.showColor();

其實此隱含的對象已經在 new 以後就被執行個體化了。預設情況下，建構函式返回的就是其 this 的值（所以不必使用 return 返回）。但建構函式模式和原廠模式一樣可能會重複定義方法，這點可以參考上述原廠模式的做法避免它（始終看起來不完美）。

原型模式
已經受夠重複定義的問題了，那麼有沒有完美的解決辦法呢？當然有。使用原型方法可以有效避免此類的問題。 複製代碼 代碼如下:function Car() {}
Car.prototype.color = new Array("red", "green", "blue");
Car.prototype.showColor = function() {
alert(this.color);
}
oCar = new Car();
oCar.showColor();

但是使用此模式需要注意的是類中的所有屬性和方法都是共用的（其實就是指標）。這意味著雖然被執行個體化的兩個變數，如果其中一處的值被更改，那麼另外一個就也會被更改。

註：此段內容有更改，詳細請參見這裡和這裡（感謝 fish 兄弟提出）。

混合模式
看起來越來越完美了，結合上述學到的方法就很容易解決原型模式的問題，這樣看起來就更像是專業的程式員了。 複製代碼 代碼如下:function Car(sColor) {
this.color = sColor;
}
Car.prototype.showColor = function() {
alert(this.color);
}
oCar = new Car("red");
oCar.showColor();

上述的方法聲明的類， showColor 方法是原型（僅建立了一個執行個體），其他的都是構造（互不干擾）。

動態原型模式
把自己的方法仍在外面總不是件非常環保的事情，下面的方法就非常的“綠色”： 複製代碼 代碼如下: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();

此方法於上述的混合模式效果一致，即在建構函式內定義屬性，而方法則使用原型模式。唯一的區別就是賦予對象方法的位置。

混合原廠模式
混合原廠模式可以認為是構造模式與混合模式的整合，因為 function 本身就是一個對象，所以可以使用 new 來執行個體化（請允許我這樣描述）。 複製代碼 代碼如下:function Car() {
var oCar = new Object;
oCar.color = "red";
oCar.showColor = function() {
alert(this.color);
}

return oCar;
}
oCar = new Car();
oCar.showColor();

不過建議避免使用此方法定義，因為於上述的原廠模式一樣，它存在重複聲明的問題。

選用何種模式？
其實通過上面的描述已經有所結果，通常使用的是 混合模式 與 動態原型模式 （我個人投動態原型模式一票）。不過不要單獨使用 原廠模式 與 構造模式 （或者其兩者的結合體），因為這樣會造成不必要的浪費。

測試代碼 xmlns="http://www.w3.org/1999/xhtml" lang="zh" xml:lang="zh">