javascript中定義類別的方法總結_基礎知識

JS中定義類別的方式有很多種：

1、工廠方式

複製程式碼 程式碼如下:

  function Car(){
   var ocar = new Object;
   ocar.color = "blue";
   ocar.doors = 4;
   ocar.showColor = function(){
    document.write(this.color)
   };
   return ocar;
  }
  var car1 = Car();
  var car2 = Car();

  呼叫此函數時將建立新對象，並賦予它所有的屬性和方法。使用此函數可以建立2個屬性完全相同的物件。當然我妹可以透過傳遞參數給它來改版這種方式。

複製程式碼 程式碼如下:

  function Car(color,door){
   var ocar = new Object;
   ocar.color = color;
   ocar.doors = door;
   ocar.showColor = function(){
    document.write(this.color)
   };
   return ocar;
  }
  var car1 = Car("red",4);
  var car2 = Car("blue",4);
  car1.showColor()  //output:"red"
  car2.showColor()  //output:"blue"

  現在可以透過給函數傳遞不同的參數來得到不同值的物件。
  在前面的範例中，每次呼叫函數Car(),都要建立showcolor()，表示每個物件都有自己的showcolor()方法。

 但是事實上，每個物件鬥共享了同一個函數。
  雖然可以在函數外定義方法，然後透過將函數的屬性指向該方法。

複製程式碼 程式碼如下:

  function showColor(){
   alert(this.color);
  }
  function Car(){
   var ocar = new Object();
   ocar.color = color;
   ocar.doors = door;
   ocar.showColor = showColor;
   return ocar;
  }

  但是這樣看起來不像是函數的方法。
2、建構函式方式 
  建構函數方式同工廠方式一樣簡單，如下圖：

複製程式碼 程式碼如下:

  function Car(color,door)

  可以看到建構函數方式在函數內部沒有建立對象，是用this關鍵字。因為在呼叫建構函數時已經建立了對象，而在函數內部只能用this來存取物件屬性。
  現在用new來創建對象，看起來像那麼回事了！但是它同工廠方式一樣。每次呼叫都會為物件創建自己的方法。

3、原型方式

  此方式利用了物件的prototype屬性。首先用空函數建立類別名，然後所有的屬性和方法都被賦予prototype屬性。

複製程式碼 程式碼如下:

  function Car()

  在這段程式碼中，先定義了一個空函數，然後透過prototype屬性來定義物件的屬性。呼叫函數時，原型的所有屬性都會立即賦予要建立的對象，所有該函數的物件存放的都是指向showColor()的指針，語法上看起來都屬於同一個物件。
  但是這個函數沒有參數，不能透過傳遞參數來初始化屬性，必須在物件建立後才能改變屬性的預設值。
  原型方式有個很嚴重的問題就是當屬性指向的是物件時，如數組。

複製程式碼 程式碼如下:

  function Car(){
  }
  Car.prototype.color = "red";
  Car.prototype.doors = 4;
  Car.prototype.arr = new Array("a","b");
  Car.prototype.showColor = function(){
   alert(this.color);
  }
  var car1 = new Car();
  var car2 = new Car();
  car1.arr.push("cc");
  alert(car1.arr);  //output:aa,bb,cc
  alert(car2.arr);  //output:aa,bb,cc

  這裡由於數組的引用值，Car的兩個物件指向的都是同一個數組，所以當在car1添加值後，在car2中也可以看到。
 聯合是用建構函數/原型方式就可以像其他程式設計語言一樣創建對象，是用建構函數定義對象的非函數屬性，用原型方式定義對象的方法。

複製程式碼 程式碼如下:

  function Car(color,door){
   this.color = color;
   this.doors = door;
   this.arr = new Array("aa","bb");
  }
  Car.prototype.showColor(){
   alert(this.color);
  }
  var car1 = new Car("red",4);
  var car2 = new Car("blue",4);
  car1.arr.push("cc");
  alert(car1.arr);  //output:aa,bb,cc
  alert(car2.arr);  //output:aa,bb

4、動態原型方式

  動態原型的方式同混合的建構子/原型方式原理相似。唯一的差別就是賦予物件方法的位置。

複製程式碼 程式碼如下:

  function Car(color,door){
   this.color = color;
   this.doors = door;
   this.arr = new Array("aa","bb");
   if(typeof Car._initialized == "undefined"){
    Car.prototype.showColor = function(){
     alert(this.color);
    };
    Car._initialized = true;
   }
  }

 動態原型方式是使用一個標誌來判斷是否已經賦予了原型方法。這樣可以保證該方法只創建一次

6、混合工廠方式

  它的目的師建立假建構函數，只傳回另一個物件的新實例。

複製程式碼 程式碼如下:

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

  與工廠方式不同的是，這種方式使用new運算符。 

PS(個人理解)：

1) 類別透過prototype定義的成員(方法或屬性)，是每個類別物件共有的，一般不用來定義成員屬性，一個物件修改了屬性值，所有物件都被修改；

2) 類別擁有prototype屬性，類別物件沒有；

3) 每次new類別物件或直接呼叫類別(以下工廠方法形式)，都會把定義類別(function)的語句執行一次（單例模式可以避免這個情況）；

4) 類別是function類型，類別物件是object類型，只有function類型才prototype屬性；

5) prototype定義的方法存取不到類別的私有變數（類別定義的局部變數），但可以透過this存取類別的成員屬性和成員方法(this定義的變數和方法)；

6) 定義類別的方式：

　　a.工廠方式(Object)

　　b.繼承方式(prototype)

　　c.建構子方式(this)

　　d.混合方式

7) [問題]為什麼prototype定義的屬性可以透過任意物件來改變？而建構函數方式定義的屬性只屬於對象，不會影響其它對象的屬性值？

  以上就是全部的創建物件方法。目前使用最廣泛的就是混合建構函式/原型方式，此外，動態原型方式也很流行。在功能上與構造函數/原型方式等價。