javascript設(shè)計(jì)模式之工廠模式示例講解

更新時(shí)間：2014年03月04日 16:06:29 作者：

這篇文章主要介紹了javascript設(shè)計(jì)模式中的工廠模式示例講解,需要的朋友可以參考下

javaScript工廠方式原始的方式

因?yàn)閷?duì)象的屬性可以在對(duì)象創(chuàng)建后動(dòng)態(tài)定義，這在 JavaScript 最初引入時(shí)都會(huì)編寫類似下面的代碼

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

在上面的代碼中，創(chuàng)建對(duì)象 car。然后給它設(shè)置幾個(gè)屬性：它的顏色是藍(lán)色，有四個(gè)門，每加侖油可以跑 25 英里。最后一個(gè)屬性實(shí)際上是指向函數(shù)的指針，意味著該屬性是個(gè)方法。執(zhí)行這段代碼后，就可以使用對(duì)象 car。不過(guò)這里有一個(gè)問(wèn)題，就是可能需要?jiǎng)?chuàng)建多個(gè) car 的實(shí)例，這顯然不是很好的方式。

解決方案：工廠方法
要解決該問(wèn)題，開(kāi)發(fā)者創(chuàng)造了能創(chuàng)建并返回特定類型的對(duì)象的工廠函數(shù)。例如，函數(shù) createCar() 可用于封裝前面列出的創(chuàng)建 car 對(duì)象的操作：

復(fù)制代碼代碼如下:

function createCar(sColor,iDoors,iMpg) {
var oTempCar = new Object;
oTempCar.color = sColor;
oTempCar.doors = iDoors;
oTempCar.mpg = iMpg;
oTempCar.showColor = function() {
alert(this.color);
};
return oTempCar;
}

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

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

調(diào)用此工廠函數(shù)，將創(chuàng)建新對(duì)象，并賦予它所有必要的屬性，給 createCar() 函數(shù)加上參數(shù)，即可為要?jiǎng)?chuàng)建的 car 對(duì)象的 color、doors 和 mpg 屬性賦值。這使兩個(gè)對(duì)象具有相同的屬性，卻有不同的屬性值。該方法有個(gè)不好的地方在于每創(chuàng)建一個(gè)car對(duì)象（即調(diào)用一次createCar函數(shù)）都會(huì)重復(fù)的為每個(gè)對(duì)象創(chuàng)建showColor 方法，而這時(shí)沒(méi)有必要的而事實(shí)上，每個(gè)對(duì)象都共享同一個(gè)函數(shù)。于是我們嘗試在函數(shù)之外去聲明其方法屬性。

在工廠函數(shù)外定義對(duì)象的方法
有些開(kāi)發(fā)者在工廠函數(shù)外定義對(duì)象的方法，然后通過(guò)屬性指向該方法，從而避免這個(gè)問(wèn)題：

復(fù)制代碼代碼如下:

function showColor() {
alert(this.color);
}

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

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

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

在上面這段重寫的代碼中，在函數(shù) createCar() 之前定義了函數(shù) showColor()。在 createCar() 內(nèi)部，賦予對(duì)象一個(gè)指向已經(jīng)存在的 showColor() 函數(shù)的指針。從功能上講，這樣解決了重復(fù)創(chuàng)建函數(shù)對(duì)象的問(wèn)題；但是從語(yǔ)義上講，該函數(shù)不太像是對(duì)象的方法。

您可能感興趣的文章: