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

2018-01-06 分類：WEB開發、程式設計開發、首頁精華0人評論發表於2018-01-06

本文由碼農網 – 小峰原創翻譯，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

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的東西，你可以點此處瞭解。