輕鬆學習 JavaScript——第 8 部分：JavaScript 中的類，javascript

輕鬆學習 JavaScript——第 8 部分：JavaScript 中的類，javascript

ECMAScript 6引入了class關鍵字以建立JavaScript中的類。現在，你可以使用class屬性在JavaScript中建立類。在ECMA 6之前，無論何時使用new運算子調用一個函數，該函數都會返回一個新對象。因此，此函數是作為一個類來使用的，並被稱為建構函式。這種調用函數來返回對象的方式也被稱為建構函式調用模式。

但在ECMAScript 6中，可以使用class關鍵字建立類。請看下面的代碼：

class Car {    constructor(maker, price) {        this.maker = maker;        this.price = price;    }    getInfo() {        console.log(this.maker + " costs : " + this.price);    }}

在上面的程式碼片段中，你已經使用ECMAScript 6 class關鍵字建立了一個名為Car的類。你也可以建立一個Car類的對象，如下所示：

var car1 = new Car("BMW", 100);car1.getInfo();var car2 = new Car("Audi", 150);car2.getInfo();

JavaScript類是慣常基於原型的繼承的簡化文法。它不提供任何新的對象建立或原型繼承方式，並且不會在JavaScript中引入任何物件導向或繼承的新模型。你也可以說類是建立對象的特殊函數。

類聲明和表達

由於JavaScript中的class屬性也是一個函數，所以也可以使用類聲明和類運算式來建立。你可以使用類聲明建立一個類，如下所示：

class Car {    constructor(maker, price) {        this.maker = maker;        this.price = price;    }    getInfo() {        console.log(this.maker + " costs : " + this.price);    }}

類也可以使用類運算式來建立。你可以建立命名或未命名的類運算式。可以這樣建立命名的類運算式，如下所示：

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}`;    }}

未命名的類運算式可以如下所示地被建立。給類運算式的名稱是類主體的本地名稱。

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}`;    }}

類的提升

如前所述，一個類既可以作為聲明又可以作為運算式來建立，但是與函式宣告不同，類聲明不會被提升到執行內容的頂部。請看下面的代碼：

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 建立建構函式，如下面的代碼所示：

class Car {    constructor(maker, price) {        this.maker = maker;        this.price = price;    }}

JavaScript類的靜態方法是用類調用的，而不是用類的特定對象調用的。如果你嘗試用類的執行個體調用它們，則JavaScript將拋出異常。使用關鍵字static可以建立靜態方法，如下所示：

class Car {    static count() {        console.log("I am static method");    }}Car.count();Car.count();

如果你試圖用執行個體調用靜態方法，那麼JavaScript會拋出異常說明這個函數不存在。另外，請記住，JavaScript類沒有靜態屬性或成員。截至目前，它只支援靜態方法。

任何使用類執行個體訪問的常規方法都被稱為原型方法。這些方法可以繼承和使用類的對象。

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類的執行個體。由於它是原型方法，所以也可以繼承。讓我們來探討為什麼這些方法被稱為原型方法。首先，考慮下面的代碼：

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關鍵字，我們可以建立一個類，但是請記住，這不是引入對象建立或繼承的新方法。相反，對於相同的對象和基於原型的繼承，這隻是一個更簡單的文法。

歡迎加入學習交流群569772982，大家一起學習交流。