ES6中的類（Class）

ES6中的類（Class）

類的基本語法

constructor方法

this與class（原型）

屬性與方法添加到this上

屬性與方法添加到類上

類的靜態成員

類的基本語法

ES6提供了更接近面向對象（注意：javascript本質上是基于對象的語言）語言的寫法，引入了Class（類）這個概念，作為對象的模板。通過class關鍵字，可以定義類。 基本上，ES6的class可以看作只是一個語法糖，它的絕大部分功能，ES5都可以做到，新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。

//定義類 class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } //創建對象 let p = new Point(1,2); console.log(p.toString());

1

2

3

4

5

6

7

8

9

10

11

12

13

14

上面代碼定義了一個“類”，可以看到里面有一個constructor方法，這就是構造方法，而this關鍵字則代表實例對象。也就是說，ES5的構造函數Point，對應ES6的Point類的構造方法。

Point類除了構造方法，還定義了一個toString方法。注意，定義“類”的方法的時候，前面不需要加上function這個關鍵字，直接把函數定義放進去了就可以了。

另外，方法之間不需要逗號分隔，加了會報錯。

注意：生成類的實例對象的寫法，要使用new命令。如果忘記加上new，像ES5函數那樣調用Class，將會報錯。

// 報錯 let point = Point(2,3); // 正確 let point = new Point(2,3);

1

2

3

4

constructor方法

constructor方法是類的默認方法，通過new命令生成對象實例時，自動調用該方法。一個類必須有constructor方法，如果沒有顯式定義，一個空的constructor方法會被默認添加。

constructor() {}

1

注意：constructor方法默認返回實例對象（即this）

擴展：constructor方法默認返回實例對象（即this），但也可以指定返回另外一個對象。

樣例代碼：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

效果截圖：

Constructor與普通構造函數的區別： 類的構造函數，不使用new是沒法調用的，會報錯。這是它跟普通構造函數的一個主要區別，后者不用new也可以執行。

class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } let p = Point(); //TypeError: Class constructor Point cannot be invoked without 'new'

1

2

3

4

5

6

7

8

9

10

11

this與class（原型）

class：類，是對象的模板。（或者叫：原型） this：當前對象。 以上定義，與java中的概念是相同的。 但是，由于javascript語言自身的特點，關于class與this，還需要做進一步說明。

注意：在javascript中，在定義類完畢之后，還可以再添加屬性和方法。

屬性與方法添加到this上

class Point { constructor() { } } let p = new Point(); p.username = 'zhangsan'; console.log(p.username); //zhangsan

1

2

3

4

5

6

上面代碼中，Point類定義之后，給對象 p 又添加了一個username屬性。這是完全可以的。 但是要注意：此種方式，僅僅是給對象p添加一個屬性，而不是給類添加一個屬性。 或者說： 此種方式，僅僅是給對象p的this添加一個屬性，而不是給類添加一個屬性。

class Point { constructor() { } } let p1 = new Point(); p1.username = 'zhangsan'; console.log(p1.username); //zhangsan let p2 = new Point(); console.log(p2.username); //undefined

1

2

3

4

5

6

7

8

9

上面例子中，只給對象p1添加了username屬性，但沒有給類添加屬性。 所以，p2對象中并沒有username屬性。

屬性與方法添加到類上

class Point { constructor() { } } Point.prototype.username = 'zhangsan'; let p1 = new Point(); console.log(p1.username); //zhangsan let p2 = new Point(); console.log(p2.username); //zhangsan

1

2

3

4

5

6

7

8

9

10

上面代碼中，使用 Point.prototype方式，給類添加屬性。 這樣，類的所有對象（p1、p2）就都有username屬性了。

在javascript中，每一個類都有一個prototype，它就是類的原型，類的所有實例共享一個原型。如果想訪問這個原型，可以使用proto指針。

樣例代碼：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

效果截圖：

類的靜態成員

樣例代碼：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

效果截圖：

上面代碼中，直接使用 Point.username 方式給類添加一個屬性，此種方式只是添加了一個靜態屬性，訪問時，只能通過類名才能訪問。

看完如果對你有幫助，感謝支持！

如果你是電腦端，看到右下角的 “

一鍵三連

” 了嗎，沒錯點它[哈哈]

加油！

共同努力！

Keafmd

elasticsearch

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。