自己動手封裝js工具類（JS中定義類的幾種方式）

cnmm22發表於2015-06-22
封裝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.color = color;  
  this.doors = door;  
  this.showColor = function()...{  
  alert(this.color)  
  };  
  }  
  var car1 = new Car("red",4);  
  var car2 = new Car("blue",4);  

  可以看到建構函式方式在函式內部沒有建立物件，是用this關鍵字。因為在呼叫建構函式時已經建立了物件，而在函式內部只能用this來訪問物件屬性。  

  現在用new來建立物件，看起來像那麼回事了！但是它同工廠方式一樣。每次呼叫都會為物件建立自己的方法。 


3、原型方式 


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


  function Car()...{  
  }  
  Car.prototype.color = "red";  
  Car.prototype.doors = 4;  
  Car.prototype.showColor = function()...{  
  alert(this.color);  
  }  
  var car1 = new Car();  
  var car2 = new 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中也可以看到。  

 

4.混合的建構函式/原型方式


是用建構函式/原型方式就可以像其他程式設計語言一樣建立物件， 是用建構函式定義物件的非函式屬性，用原型方式定義物件的方法。  


  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  
    

5、動態原型方式 


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

  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運算子。   
    

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

相關文章