JS定義類的六種方式詳解

在前端開發中，經常需要定義JS類。那麼在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.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,ccalert(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,ccalert(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運算符。

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

以上這篇JS定義類的六種方式詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。