類的基本語法
ES6提供了更接近面向對象（注意：javascript本質上是基于對象的語言）語言的寫法，引入了Class（類）這個概念，作為對象的模板。通過class關鍵字，可以定義類。 基本上，ES6的class可以看作只是一個語法糖，它的絕大部分功能，ES5都可以做到，新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
//定義類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()); |
上面代碼定義了一個“類”，可以看到里面有一個constructor方法，這就是構造方法，而this關鍵字則代表實例對象。也就是說，ES5的構造函數Point，對應ES6的Point類的構造方法。
Point類除了構造方法，還定義了一個toString方法。注意，定義“類”的方法的時候，前面不需要加上function這個關鍵字，直接把函數定義放進去了就可以了。另外，方法之間不需要逗號分隔，加了會報錯。
注意：生成類的實例對象的寫法，要使用new命令。如果忘記加上new，像ES5函數那樣調用Class，將會報錯。
|
1
2
3
4
|
// 報錯let point = Point(2,3);// 正確let point = new Point(2,3); |
constructor方法
constructor方法是類的默認方法，通過new命令生成對象實例時，自動調用該方法。一個類必須有constructor方法，如果沒有顯式定義，一個空的constructor方法會被默認添加。
|
1
|
constructor() {} |
注意：constructor方法默認返回實例對象（即this）
擴展：constructor方法默認返回實例對象（即this），但也可以指定返回另外一個對象。
樣例代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> class Point { constructor() { return new Date(); //return Object.create(null); } } let p = new Point(); //返回為Date對象 console.log(p); </script> </body></html> |
效果截圖：
Constructor與普通構造函數的區別： 類的構造函數，不使用new是沒法調用的，會報錯。這是它跟普通構造函數的一個主要區別，后者不用new也可以執行。
|
1
2
3
4
5
6
7
8
9
10
11
|
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' |
this與class（原型）
class：類，是對象的模板。（或者叫：原型） this：當前對象。 以上定義，與java中的概念是相同的。 但是，由于javascript語言自身的特點，關于class與this，還需要做進一步說明。
注意：在javascript中，在定義類完畢之后，還可以再添加屬性和方法。
屬性與方法添加到this上
|
1
2
3
4
5
6
|
class Point { constructor() { }}let p = new Point();p.username = 'zhangsan';console.log(p.username); //zhangsan |
上面代碼中，Point類定義之后，給對象 p 又添加了一個username屬性。這是完全可以的。 但是要注意：此種方式，僅僅是給對象p添加一個屬性，而不是給類添加一個屬性。 或者說： 此種方式，僅僅是給對象p的this添加一個屬性，而不是給類添加一個屬性。
|
1
2
3
4
5
6
7
8
9
|
class Point { constructor() { }}let p1 = new Point();p1.username = 'zhangsan';console.log(p1.username); //zhangsanlet p2 = new Point();console.log(p2.username); //undefined |
上面例子中，只給對象p1添加了username屬性，但沒有給類添加屬性。 所以，p2對象中并沒有username屬性。
屬性與方法添加到類上
|
1
2
3
4
5
6
7
8
9
10
|
class Point { constructor() { }}Point.prototype.username = 'zhangsan';let p1 = new Point();console.log(p1.username); //zhangsanlet p2 = new Point();console.log(p2.username); //zhangsan |
上面代碼中，使用 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
|
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> class Point { constructor() { } } let p = new Point(); console.log(p.__proto__); //注意proto指針的寫法 /** * 輸出結果： * {constructor: ƒ} * constructor: class Point //這里證明：proto指針指向類的原型 * __proto__: Object */ let p1 = new Point(); let p2 = new Point(); //這里證明：類的所有實例共享一個原型 console.log(p1.__proto__===p2.__proto__); //true </script> </body></html> |
效果截圖：
類的靜態成員
樣例代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> class Point { constructor() { } } Point.username = '牛哄哄的柯南'; let p = new Point(); console.log(p.username); //undefined console.log(Point.username); //牛哄哄的柯南 </script> </body></html> |
效果截圖：
上面代碼中，直接使用 Point.username 方式給類添加一個屬性，此種方式只是添加了一個靜態屬性，訪問時，只能通過類名才能訪問。
到此這篇關于ES6中類（Class）的文章就介紹到這了,更多相關ES6的類（Class）內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/weixin_43883917/article/details/110325090
