JavaScript基礎學習之-自訂對象（2）

標籤：

自訂對象

一、定義類或對象
1.工廠方式
建立對象car 

 1 var oCar = new Object; 2 oCar.color = "red"; 3 oCar.doors = 4; 4 oCar.mpg = 23; 5 oCar.showColor = function(){ 6    alert(this.corlor); 7 }; 8  9 建立多個car10 function createCar(color, doors, mpg) {11     var tempcar = new Object;12     tempcar.color = color;13     tempcar.doors = doors;14     tempcar.mpg = mpg;15     tempcar.showColor = function () {16         alert(this.color)17     };18    return tempcar;19 }20 21 var car1 = createCar("red", 4, 23);22 var car2 = createCar("blue", 3, 25);23 car1.showColor();    //outputs "red"24 car2.showColor();    //outputs "blue"

 

這個例子中，每次調用函數createCar()，都要建立新函數showColor()，意味著每個對象都有自己的showColor()版本，事實上，每個對象都共用了同一個函數。
有些開發人員在工廠函數外定義對象的方法，然後通過屬性指向該方法，從而避開這個問題。

 1 function showColor(){ 2    alert(this.color); 3 } 4 function createCar(color, doors, mpg) { 5     var tempcar = new Object; 6     tempcar.color = color; 7     tempcar.doors = doors; 8     tempcar.mpg = mpg; 9     tempcar.showColor = showColor;10     return tempcar;11 }12 13 var car1 = createCar("red", 4, 23);14 var car2 = createCar("blue", 3, 25);15 car1.showColor();    //outputs "red"16 car2.showColor();    //outputs "blue"

 

從功能上講，這樣解決了重複建立函數對象的問題，但該函數看起來不像對象的方法。所有這些問題引發了開發人員定義的建構函式的出現。

2.建構函式方法

 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     }; 8 } 9 10 var oCar1 = new Car("red", 4, 23);11 var oCar2 = new Car("blue", 3, 25);12 oCar1.showColor();    //outputs "red"13 oCar2.showColor();    //outputs "blue"

 

就像工廠函數，建構函式會重複產生函數，為每個對象都建立獨立的函數版本。不過，也可以用外部函數重寫建構函式，同樣，這麼做語義上無任何意義。

3.原型方式

 1 function Car(){ 2 } 3 Car.prototype.color = "red"; 4 Car.prototype.doors= 4; 5 Car.prototype.mpg= 23; 6 Car.prototype.showColor = function(){ 7    alert(this.color); 8 } 9 10 var oCar1 = new Car();11 var oCar2 = new Car();

 

它解決了前面兩種方式存在的兩個問題。但並不盡人意。首先，這個建構函式沒有參數。使用原型方式時，不能通過建構函式傳遞參數初始化屬性的值，這點很令人計厭，但還沒完，真正的問題出現在屬性指向的是對象，而不是函數時。考慮下面的例子：

 1 function Car(){ 2 } 3 Car.prototype.color = "red"; 4 Car.prototype.doors= 4; 5 Car.prototype.mpg= 23; 6 Car.prototype.drivers = new Array("Mike","Sue"); 7 Car.prototype.showColor = function(){ 8    alert(this.color); 9 }10 11 var oCar1 = new Car();12 var oCar2 = new Car();13 oCar1.drivers.push("Matt");14 alert(oCar1.drivers);      //outputs "Mike,Sue,Matt"15 alert(oCar2.drivers);      //outputs "Mike,Sue,Matt"16 17 4.混合的建構函式/原型方式18 function Car(sColor, iDoors, iMpg) {19     this.color = sColor;20     this.doors = iDoors;21     this.mpg = iMpg;22     this.drivers = new Array("Mike", "Sue");23 }24 25 Car.prototype.showColor = function () {26     alert(this.color);27 };28 29 var oCar1 = new Car("red", 4, 23);30 var oCar2 = new Car("blue", 3, 25);31 32 oCar1.drivers.push("Matt");33 34 alert(oCar1.drivers);    //outputs "Mike,Sue,Matt"35 alert(oCar2.drivers);    //outputs "Mike,Sue"

 

現在就更像建立一般對象了。所有的非函數屬性都有建構函式中建立，意味著又可用建構函式的參數賦予屬性預設值了。因為只建立showColor()函數的一個執行個體，所以沒有記憶體浪費。

5.動態原型方法

 1 function Car(sColor, iDoors, iMpg) { 2     this.color = sColor; 3     this.doors = iDoors; 4     this.mpg = iMpg; 5     this.drivers = new Array("Mike", "Sue"); 6  7     if (typeof Car._initialized == "undefined") { 8  9         Car.prototype.showColor = function () {10             alert(this.color);11         };12 13         Car._initialized = true;14     }15 }16 17 18 var oCar1 = new Car("red", 4, 23);19 var oCar2 = new Car("blue", 3, 25);20 21 oCar1.drivers.push("Matt");22 23 alert(oCar1.drivers);    //outputs "Mike,Sue,Matt"24 alert(oCar2.drivers);    //outputs "Mike,Sue"

 

動態原型方法的基本想法與混合的建構函式/原型方式相同，即在建構函式內定義非函數屬性，而函數屬性則利用原型屬性定義。唯一的區別是賦予對象方法的位置。

6.混合工廠方式
這種方式通常是在不能應用前一種方式時的變通方法。它的目的是建立假建構函式，只返回另一種對象的新執行個體。

function Car() {    var tempcar = new Object;    tempcar.color = "red";    tempcar.doors = 4;    tempcar.mpg = 23;    tempcar.showColor = function () {        alert(this.color)    };   return tempcar;}

 

與經典方式不同，這種方式使用new運算子，使它看起來像真正的建構函式。

7.採用哪種方式
   如前所述，目前使用最廣泛的是混合的建構函式/原型方式。些外，動態原型方法也很流行，在功能上與前者等價，可以採用這兩種方式中的任何一種。

二、修改對象
1.建立新方法
可以用prototype屬性為任何已有的類定義新方法，就像處理自己的類一樣。
例：

Array.prototype.indexOf = function(vItem){   for(var i=0;i<this.length;i++){      if(vItem == this[i]){         return i;      }   }   retunr -1;}

 

最後，如果想給ECMAScript中的每個本機物件添加新方法，必須在Object對象的prototype屬性上定義它。

2.重定義已有方法
就像能給自己的類定義新方法一樣，也可重定義已有的方法。函數名只是指向函數的指標，因此可以輕易地使它指向其他函數。
如

 1 Function.prototype.toString = function(){ 2    return "Function code hidden"; 3 } 4 function sayHi(){ 5    alert("hi"); 6 } 7 alert(sayHi.toString());      //outputs "Function code hidden" 8  9  10 11  

 

 

JavaScript基礎學習之-自訂對象（2）