javascript設計模式之工廠模式範例講解_基礎知識

javaScript工廠方式原始的方式

因為物件的屬性可以在物件建立後動態定義，這在 JavaScript 最初引入時都會編寫類似下面的程式碼

複製代碼 代碼如下:

var oCar = new Object;
oCar.color = "blue";
oCar.doors = 4;
oCar.mpg = 25;
oCar.showColor = function() {
  alert(this.color);
};

在上面的程式碼中，建立物件 car。然後給它設置幾個屬性：它的顏色是藍色，有四個門，每加侖油可以跑 25 英里。最後一個屬性其實是指向函數的指針，這意味著該屬性是個方法。執行這段程式碼後，就可以使用物件 car。不過這裡有一個問題，就是可能需要創建多個 car 的實例，這顯然不是很好的方式。

解決方案：工廠方法
要解決該問題，開發者創造了能創建並返回特定類型的物件的工廠函數。例如，函數 createCar() 可用於封裝前面列出的建立 car 物件的操作：

複製程式碼 程式碼如下:

function createCar(sColororiDoors(sColororg) >  var oTempCar = new Object;
  oTempCar.color = sColor;
  oTempCar.doors = iDoors;
  oTempCar.mpg = iMpg;
  oTempTemp.Car.showor = func( this.color);
  };
  return oTempCar;
}

var oCar1 = createCar("red",4,23);var oCar2 = createCar("blue",3,25);

oCar1.showColor();        //輸出 "red"

oCar2.showColor();        //輸出 "blue"

呼叫此工廠函數，將建立新對象，並賦予它所有必要的屬性，為 createCar() 函數加上參數，即可為要建立的 car 物件的 color、doors 和 mpg 屬性賦值。這使得兩個物件具有相同的屬性，卻有不同的屬性值。這個方法有個不好的地方在於每建立一個car物件（即呼叫一次createCar函數）都會重複的為每個物件建立showColor 方法，而此時沒有必要的而事實上，每個物件都共用同一個函數。於是我們嘗試在函數之外去宣告其方法屬性。

在工廠函數外定義物件的方法
有些開發者在工廠函數外定義物件的方法，然後透過屬性指向該方法，從而避免這個問題：

複製程式碼 程式碼如下:

function showColor() {


function showColor() { color);

}

function createCar(sColor,iDoors,iMpg) {
  var oTempCar = new Object;
  oTempCar.color = sColor;
  oTempCar.doors = iTempCar.color = sColor;
  oTempCar.doors = iDoors;
  oTempCar.showColor = showColor;

  return oTempCar;

}

var oCar1 = createCar("red",4,23);

var oCar2 = createCar("blue",3,25);

oCar1.showColor();        //輸出 "red"

oCar2.showColor();        //輸出 "blue"

在上面這段重寫的程式碼中，在函數 createCar() 之前定義了函數 showColor()。在 createCar() 內部，賦予物件一個指向已經存在的 showColor() 函數的指標。從功能上講，這樣解決了重複創建函數物件的問題；但是從語義上講，該函數不太像是物件的方法。