JavaScript之工廠方式 構造函數方式 原型方式講解

一、工廠方式可以為一個對象，建立多個執行個體。

[javascript] ​​view plain​​​​copy​​

1. var oCar = new Object;  
2. oCar.color = "red";  
3. oCar.doors=4;  
4. oCar.mpg=23;  
5. oCar.showColor = function(){  
6.     alert(this.color);  
7. }  

上面的代碼，建立car對象，并賦予屬性和方法。執行代碼後就可以使用對象，問題是我們經常需要重複、建立多個執行個體。

解決此問題的方法是：建立能夠傳回特定類型的對象的工廠函數。

1. function createCar(){  
2.     var oTempCar = new Object;  
3.     oTempCar.color = "red";  
4.     oTempCar.doors= 4;  
5.     oTempCar.mpg  = 23;  
6.     oTempCar.showColor= function(){  
7.         alert(this.doors);  
8.     }  
9.     return oTempCar;  
11. var oCar1 = createCar();  
12. var oCar2 = createCar();  

執行代碼，将建立2個car對象。

上面的代碼仍存在問題：為每個對象建立獨立的函數版本，但實際上他們的函數功能是一樣的，無需獨立建立。

解決方法：建立外部函數重寫工廠函數。

1. function showColor(){  
7.     oTempCar.doors = 4;  
8.     oTempCar.mpg = 23;  
9.     oTempCar.showColor = showColor;  

二、構造函數方式

在構造函數内部無需建立對象，而是使用this關鍵字。使用new調用構造函數。

1. function Car(sColor, iDoors, iMpg){  
2.     this.color = sColor;  
3.     this.doors= iDoors;  
4.     this.mpg  = iMpg;  
5.     this.showColor = function(){  
6.         alert(this.color);  
7.     };  
9. var oCar1 = new Car("red", 4, 23);  
10. car oCar2 = new Car("blue",3, 25);  

與工廠方式相同，構造函數也存在無法共享方法的問題。解決方法仍然是使用外部函數。

三、原型方式

該方式利用了對象的prototype屬性，可以把它看成建立新對象所依賴的原型。

1. function Car(){}  //建立空構造函數類名  
2. Car.prototype.color = "red";  
3. Car.prototype.doors= 4;  
4. Car.prototype.mpg = 23;  
5. Car.prototype.showColor = function(){  
8. var oCar1 = new Car();  
9. var oCar2 = new Car();  

所有的屬性和方法都被直接賦予建立對象所依賴的原型prototype屬性。

原型方式很好的解決了構造函數方式、工廠方式的無法共享方法問題，但卻出現一個新問題：無法傳遞參數，初始化屬性。

四、混合方式

看到三者的優缺點，唯有混合使用它們。

1. function Car(sColor, iDoor, iMpg){  
3.     this.doors=iDoors;  
4.     this.mpg = iMpg;  
5.     this.drivers = new Array("Mike","Sue");  
11. var oCar2 = new Car("blue", 3, 25);  
12. oCar1.drivers.push("Matt");  
13. alert(oCar1.drivers); //輸出 "Mike,Sue,Matt"  
14. alert(oCar2.drivers);//輸出  "Mike,Sue"