首頁 > web前端 > js教程 > 五種JS定義類別方式的​​詳解

五種JS定義類別方式的​​詳解

小云云
發布: 2017-12-02 09:22:56
原創
1401 人瀏覽過

我們知道JavaScript現在在我們的開發當中扮演著很重要的角色,在前端開發中,經常需要定義JS類別。那麼在JavaScript中,定義類別的方式有幾種,分別是什麼呢?本文就JS定義類別的五種方式說明如下。

1、工廠方式

1

2

3

4

5

6

7

8

9

10

11

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個屬性完全相同的物件。

當然可以透過給它傳遞參數來改版這種方式。

1

2

3

4

5

6

7

8

9

10

11

12

13

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()方法。

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

1

2

3

4

5

6

7

8

9

10

11

function showColor(){

   

alert(this.color);

}

function Car(){

var ocar = new Object();

ocar.color = color;

ocar.doors = door;

ocar.showColor = showColor;

return ocar;

}

登入後複製


但是這樣看起來不像是函數的方法。

2、建構子方式

建構子方式同工廠方式一樣簡單,如下所示:

1

2

3

4

5

6

7

8

9

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屬性。

1

2

3

4

5

6

7

8

9

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()的指針,語法上看起來都屬於同一個物件。

但是這個函數沒有參數,不能透過傳遞參數來初始化屬性,必須在物件建立後才能改變屬性的預設值。

原型方式有個很嚴重的問題就是當屬性指向的是物件時,如數組。

1

2

3

4

5

6

7

8

9

10

11

12

13

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中也可以看到。

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

1

2

3

4

5

6

7

8

9

10

11

12

13

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、動態原型方式

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

1

2

3

4

5

6

7

8

9

10

11

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;

}

}

登入後複製

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

5、混合工廠方式

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

1

2

3

4

5

6

7

8

9

function Car(){

var ocar = new Object();

ocar.color = “red”;

ocar.doors = 4;

ocar.showColor = function(){

alert(this.color)

};

return ocar;

}

登入後複製

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

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

以上內容就是JS定義類別的五種方式詳解,希望能幫助大家。

相關推薦:

php如何定義類別及操作範例

#JavaScript 透過函數來實作定義類別實例用法詳解

Javascript自訂類型、屬性、方法實例程式碼總結

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

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板