首頁 > web前端 > js教程 > 主體

JS中定義類別的方法講解

亚连
發布: 2018-05-17 09:54:41
原創
1299 人瀏覽過

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中也可以看到。 
 聯合是用建構函數/原型方式就可以像其他程式設計語言一樣創建對象,是用建構函數定義對象的非函數屬性,用原型方式定義對象的方法。 

 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運算子。 
  以上就是全部的創建物件方法。目前使用最廣泛的就是混合建構函式/原型方式,此外,動態原型方式也很流行。在功能上與構造函數/原型方式等價。

相關文章:

JavaScript的基本語法及變數講解 

js中一些基礎常用的方法講解

js基本語法詳細解答

#

以上是JS中定義類別的方法講解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!