javascript中定義類的方法匯總

2024-05-06 16:13:03

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了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.混合方式