語法以及如何聲明一個類

在今天的教程中，我們將瞭解 JavaScript 類以及如何有效地使用它。

JavaScript 類是創建對象的藍圖。一個類封裝了數據和操作數據的函數。

與 Java 和 C# 等其他編程語言不同，JavaScript 類是原型繼承之上的語法糖。換句話說，ES6 類只是特殊的函數。

重新審視 ES6 之前的類

在 ES6 之前，JavaScript 沒有類的概念。爲了模仿一個類，我們經常使用構造函數/原型模式，如下例所示：

function Person(name) {
    this.name = name;
}

Person.prototype.getName = function () {
    return this.name;
};

var john = new Person("John Doe");
console.log(john.getName())）

輸出：

John Doe
這個怎麼運行的。

首先，將 Person 創建爲具有名爲 name 的屬性名稱的構造函數。getName() 函數被分配給原型，以便它可以被 Person 類型的所有實例共享。

然後，使用 new 運算符創建 Person 類型的新實例。因此，john 對象是通過原型繼承的 Person 和 Object 的一個實例。

以下語句使用 instanceof 運算符來檢查 john 是否是 Person 和 Object 類型的實例：

console.log(john instanceof Person); // true
console.log(john instanceof Object); // true

ES6 類聲明

ES6 引入了一種用於聲明類的新語法，如下例所示：

class Person {
    constructor(name) {
        this.name = name;
    }
    getName() {
        return this.name;
    }
}

這個 Person 類的行爲類似於前面示例中的 Person 類型。但是，它不使用構造函數/原型模式，而是使用 class 關鍵字。

在 Person 類中，constructor() 是我們可以初始化實例屬性的地方。當我們實例化類的對象時，JavaScript 會自動調用 constructor() 方法。

下面創建一個新的 Person 對象，它會自動調用 Person 類的 constructor()：

let john = new Person("John Doe");
getName() 被稱爲 Person 類的方法。與構造函數一樣，我們可以使用以下語法調用類的方法：

objectName.methodName(args)
例如：

let name = john.getName();
console.log(name); // "John Doe"

要驗證類是特殊函數這一事實，我們可以使用 typeof 運算符來檢查 Person 類的類型。

console.log(typeof Person); // function
它按預期返回功能。

john 對象也是 Person 和 Object 類型的一個實例：

console.log(john instanceof Person); // true
console.log(john instanceof Object); // true

類與自定義類型

儘管類和通過構造函數定義的自定義類型有相似之處，但還是有一些重要的區別。

首先，類聲明不像函數聲明那樣被提升。

例如，如果將以下代碼放在 Person 類聲明部分的上方，則會收到 ReferenceError。

let john = new Person("John Doe");
錯誤：

Uncaught ReferenceError: Person is not defined

其次，一個類中的所有代碼都自動在嚴格模式下執行。我們不能改變這種行爲。

第三，類方法是不可枚舉的。如果我們使用構造函數/原型模式，則必須使用 Object.defineProperty() 方法使屬性不可枚舉。

最後，在沒有 new 運算符的情況下調用類構造函數將導致錯誤，如下例所示。

let john = Person("John Doe");
錯誤：

Uncaught TypeError: Class constructor Person cannot be invoked without 'new'

請注意，可以在沒有 new 運算符的情況下調用構造函數。在這種情況下，構造函數的行爲類似於常規函數。

總結

使用 JavaScript 類關鍵字聲明一個新類。
類聲明是原型繼承的語法糖，具有額外的增強功能。

以上就是分享的所有內容，想要了解更多歡迎前往公衆號：web前端開發社區，每日干貨分享