JavaScript 定義類

在javascript中定義類或對象有下面幾種常用的方式：

工廠方式

  
  
  
          

   
   
   
           
 
            function createCar(color, doors, mpg){ 
            
     
            var tempCar =  
            new Object; 
            
    tempCar.color = color; 
            
    tempCar.doors = doors; 
            
    tempCar.mpg = mpg; 
            
    tempCar.showColor =  
            function (){ 
            
        alert( 
            this.color); 
            
    }; 
            
     
            return tempCar; 
            
} 
            
 
            
 
            var car1 = createCar("red", 4, 23); 
            
 
            var car2 = createCar("blue", 3, 25); 
            
car1.showColor(); 
            
car2.showColor(); 
           
  
  
  
          

定義了一個能創建並返回特定類型對象的工廠函數，看起來還是不錯的，但有個小問題，每次調用時都要創建新函數showColor，我們可以把它移到函數外面，

function showColor(){
    alert(this.color);
}
在工廠函數中直接指向它
tempCar.showColor = showColor;

這樣避免了重復創建函數的問題，但看起來不像對象的方法了。

構造函數方式

  
  
  
          

   
   
   
           
 
            function Car(sColor, iDoors, iMpg){ 
            
     
            this.color = sColor; 
            
     
            this.doors = iDoors; 
            
     
            this.mpg = iMpg; 
            
     
            this.showColor =  
            function (){ 
            
        alert( 
            this.color); 
            
    }; 
            
} 
            
 
            var car1 =  
            new Car("red", 4, 23); 
            
 
            var car2 =  
            new Car("blue", 3, 25); 
            
car1.showColor(); 
            
car2.showColor(); 
           
  
  
  
          

可以看到與第一中方式的差別，在構造函數內部無創建對象，而是使用this 關鍵字。使用new 調用構造函數時，先創建了一個對象，然后用this來訪問。
這種用法於其他面向對象語言很相似了，但這種方式和上一種有同一個問題，就是重復創建函數。

構混合的構造函數/原型方式

這種方式就是同時使用構造函數方式和原型方式，綜合他們的優點，構造函數方式前面介紹過了，現在看一下原型方式

  
  
  
          

   
   
   
           
 
            function Car(){ 
            
} 
            
Car.prototype.color = "red"; 
            
Car.prototype.doors = 4; 
            
Car.prototype.mpg = 23; 
            
Car.prototype.showColor =  
            function(){ 
            
    alert( 
            this.color); 
            
}; 
            
 
            var car1 =  
            new Car(); 
            
 
            var car2 =  
            new Car(); 
           
  
  
  
          

首先定義了構造函數Car，但無任何代碼，然后通過prototype 添加屬性
優點：
a. 所有實例存放的都是指向showColor 的指針，解決了重復創建函數的問題
b. 可以用 instanceof 檢查對象類型
   alert(car1 instanceof Car);  //true

缺點，添加下面的代碼：

Car.prototype.drivers = new Array("mike", "sue");

car1.drivers.push("matt");
alert(car1.drivers);  //outputs "mike,sue,matt"
alert(car2.drivers);  //outputs "mike,sue,matt"
drivers是指向Array對象的指針，Car的兩個實例都指向同一個數組。

下面就用一下混合方式：

  
  
  
          

   
   
   
           
 
            function Car(sColor, iDoors, iMpg){ 
            
     
            this.color = sColor; 
            
     
            this.doors = iDoors; 
            
     
            this.mpg = iMpg; 
            
     
            this.drivers =  
            new Array("mike", "sue"); 
            
} 
            
Car.prototype.showColor =  
            function (){ 
            
    alert( 
            this.color); 
            
}; 
            
 
            var car1 =  
            new Car("red", 4, 23); 
            
 
            var car2 =  
            new Car("blue", 3, 25); 
            
car1.drivers.push("matt"); 
            
alert(car1.drivers); 
            
alert(car2.drivers); 
           
  
  
  
          

這樣就沒有問題了，並且還可以使用 instanceof

動態原型法

  
  
  
          

   
   
   
           
 
            function Car(sColor, iDoors, iMpg){ 
            
     
            this.color = sColor; 
            
     
            this.doors = iDoors; 
            
     
            this.mpg = iMpg; 
            
     
            this.drivers =  
            new Array("mike", "sue"); 
            
     
            if( 
            typeof Car.initialized == "undefined"){ 
            
        Car.prototype.showColor =  
            function (){ 
            
            alert( 
            this.color); 
            
        }; 
            
        Car.initialized =  
            true; 
            
    } 
            
} 
            
 
            var car1 =  
            new Car("red", 4, 23); 
            
 
            var car2 =  
            new Car("blue", 3, 25); 
            
car1.drivers.push("matt"); 
            
alert(car1.drivers); 
            
alert(car2.drivers); 
           
  
  
  
          

這種方式是我最喜歡的，所有的類定義都在一個函數中完成，看起來非常像其他語言的類定義，不會重復創建函數，還可以用 instanceof