ECMAScript 6引入了class關鍵字以建立JavaScript中的類。現在，你可以使用class屬性在JavaScript中建立類。在ECMA 6之前，無論何時使用new運算子呼叫一個函式，該函式都會返回一個新物件。因此，此函式是作為一個類來使用的，並被稱為建構函式。這種呼叫函式來返回物件的方式也被稱為建構函式呼叫模式。但在ECMAScript 6中，可以使用class關鍵字建立類。請看下面的程式碼：
|
1 2 3 4 5 6 7 8 9 |
class Car { constructor(maker, price) { this.maker = maker; this.price = price; } getInfo() { console.log(this.maker + " costs : " + this.price); } } |
在上面的程式碼片段中，你已經使用ECMAScript 6 class關鍵字建立了一個名為Car的類。你也可以建立一個Car類的物件，如下所示：
|
1 2 3 4 |
var car1 = new Car("BMW", 100); car1.getInfo(); var car2 = new Car("Audi", 150); car2.getInfo(); |
JavaScript類是慣常基於原型的繼承的簡化語法。它不提供任何新的物件建立或原型繼承方式，並且不會在JavaScript中引入任何物件導向或繼承的新模型。你也可以說類是建立物件的特殊函式。
類宣告和表達
由於JavaScript中的class屬性也是一個函式，所以也可以使用類宣告和類表示式來建立。你可以使用類宣告建立一個類，如下所示：
|
1 2 3 4 5 6 7 8 9 |
class Car { constructor(maker, price) { this.maker = maker; this.price = price; } getInfo() { console.log(this.maker + " costs : " + this.price); } } |
類也可以使用類表示式來建立。你可以建立命名或未命名的類表示式。可以這樣建立命名的類表示式，如下所示：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var Car = class { constructor(maker, price) { this.maker = maker; this.price = price; } getInfo() { console.log(this.maker + " costs : " + this.price); } toString() { return `${this.maker} costs : ${this.price}`; } } |
未命名的類表示式可以如下所示地被建立。給類表示式的名稱是類主體的本地名稱。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var Car = class c { constructor(maker, price) { this.maker = maker; this.price = price; } getInfo() { console.log(this.maker + " costs : " + this.price); } toString() { return `${this.maker} costs : ${this.price}`; } } |
類的提升
如前所述，一個類既可以作為宣告又可以作為表示式來建立，但是與函式宣告不同，類宣告不會被提升到執行上下文的頂部。請看下面的程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var car1 = new Car("BMW", 10); // Reference Error console.log(car1.toString()); class Car { constructor(maker, price) { this.maker = maker; this.price = price; } getInfo() { console.log(this.maker + " costs : " + this.price); } toString() { return `${this.maker} costs : ${this.price}`; } } |
上面的程式碼會丟擲引用錯誤（Reference Error），因為你在宣告它之前試圖訪問一個類。因此，我們可以得到函式宣告被提升，而類宣告不被提升的結論。
類方法
JavaScript類中有三種型別的方法：
- 構造方法。
- 靜態方法。
- 原型方法。
類建構函式方法建立初始化物件。一個類只能有一個構造方法。如果你嘗試建立多個建構函式方法，則JavaScript將引發異常。可以使用關鍵字constructor 建立建構函式，如下面的程式碼所示：
|
1 2 3 4 5 6 |
class Car { constructor(maker, price) { this.maker = maker; this.price = price; } } |
JavaScript類的靜態方法是用類呼叫的，而不是用類的特定物件呼叫的。如果你嘗試用類的例項呼叫它們，則JavaScript將丟擲異常。使用關鍵字static可以建立靜態方法，如下所示：
|
1 2 3 4 5 6 7 |
class Car { static count() { console.log("I am static method"); } } Car.count(); Car.count(); |
如果你試圖用例項呼叫靜態方法，那麼JavaScript會丟擲異常說明這個函式不存在。另外，請記住，JavaScript類沒有靜態屬性或成員。截至目前，它只支援靜態方法。
任何使用類例項訪問的常規方法都被稱為原型方法。這些方法可以繼承和使用類的物件。
|
1 2 3 4 5 6 7 8 9 10 11 |
class Car { constructor(maker, price) { this.maker = maker; this.price = price; } getInfo() { console.log(this.maker + " costs : " + this.price); } } var car1 = new Car("BMW", 10); car1.getInfo(); |
在上面的程式碼片段中，getInfo()是Car類的原型方法。正如你所看到的，我們正在使用Car類的例項。由於它是原型方法，所以也可以繼承。讓我們來探討為什麼這些方法被稱為原型方法。首先，考慮下面的程式碼：
|
1 2 3 4 5 6 7 8 9 10 |
class Car { constructor(maker, price) { this.maker = maker; this.price = price; } getInfo() { console.log(this.maker + " costs : " + this.price); } } console.log(typeof (Car)); // function |
在這個程式碼片段中，我們輸入了一個Car類的型別，也得到了一個函式的輸出。正如你所看到的，這個類只是一個函式型別，所以和其他函式一樣，它也有一個prototype屬性。這些常規的方法是類的原型物件的方法，因此它們被稱為原型方法。它們可以通過堅持基於原型的繼承而被繼承。
除了這三種型別的方法之外，JavaScript也有一些叫getter和setter的東西，你可以點此處瞭解。
結論
在這篇文章中，我們簡要介紹了ECMAScript 2015中引入的JavaScript類屬性。使用class關鍵字，我們可以建立一個類，但是請記住，這不是引入物件建立或繼承的新方法。相反，對於相同的物件和基於原型的繼承，這只是一個更簡單的語法。