前言

在 ES6 之前，JavaScript 開發(fā)者必須通過構(gòu)造函數(shù)和原型鏈（prototype）來模擬“類”的行為，代碼既冗長又容易出錯(cuò)。ES6 引入了 class 關(guān)鍵字，雖然它本質(zhì)上是語法糖，但它讓 JavaScript 的面向?qū)ο缶幊套兊酶忧逦蜆?biāo)準(zhǔn)。

一、 基礎(chǔ)：類的定義與實(shí)例化

class 將構(gòu)造函數(shù)（constructor）和原型方法（speak）統(tǒng)一封裝在一個(gè)大括號(hào)內(nèi)。

class Animal {
    // 構(gòu)造函數(shù)：每當(dāng) new 一個(gè)實(shí)例時(shí)自動(dòng)調(diào)用
    constructor(name) {
        this.name = name; // 實(shí)例屬性
    }
    // 原型方法：定義在 Animal.prototype 上，供所有實(shí)例共享
    speak() {
        console.log(`${this.name} speak!!!`);
    }
}
const dog = new Animal('dog');
dog.speak(); // dog speak!!!

二、 繼承：extends 與 super 的力量

繼承讓子類可以復(fù)用父類的邏輯。在子類中，super 是連接父類的橋梁。

核心規(guī)則

1. 必須調(diào)用 super：子類如果沒有自己的 constructor，引擎會(huì)默認(rèn)添加。如果有，則必須在訪問 this 之前調(diào)用 super() ，否則會(huì)報(bào)錯(cuò)。
2. 方法復(fù)用：可以使用 super.methodName() 調(diào)用父類的普通方法。

class Animal {
    constructor(name) {
        this.name = name;
    }
    eat() {
        return `${this.name} needs food`;
    }
}
class Cat extends Animal {
    constructor(name, color) {
        // 1. 調(diào)用父類構(gòu)造函數(shù)（傳遞 name）
        super(name); 
        this.color = color;
    }
    eatFood() {
        // 2. 通過 super 調(diào)用父類的原型方法
        console.log(`${this.name} is ${this.color}, ${super.eat()}`);
    }
}
const mimi = new Cat('mimi', 'white');
mimi.eatFood(); // mimi is white, mimi needs food

三、 靜態(tài)成員：static 關(guān)鍵字

static 定義的屬性和方法屬于類本身，而不是實(shí)例。

注意事項(xiàng)

• 不可繼承：實(shí)例對象無法訪問靜態(tài)方法。
• this 指向：靜態(tài)方法中的 this 指向的是 類本身，而不是實(shí)例。

class Animal {
    static feet = 4; // 靜態(tài)屬性
    static eat() {
        // 注意：這里的 this 指向 Animal 類本身
        console.log(`${this.name} is eating`); // 這里的 this.name 輸出的是 "Animal"（類的名字）
    }
}
const cat = new Animal();
console.log(cat.feet);      // undefined (實(shí)例無法訪問)
console.log(Animal.feet);   // 4 (類直接訪問)
Animal.eat();               // "Animal is eating"

四、 面試模擬題

Q1：ES6 的 class 聲明和普通 function 構(gòu)造函數(shù)有什么區(qū)別？

參考回答：

1. 嚴(yán)格模式：class 內(nèi)部默認(rèn)就是嚴(yán)格模式。
2. 變量提升：class 不存在變量提升（存在暫時(shí)性死區(qū)），必須先定義后使用。
3. 調(diào)用方式：class 必須配合 new 調(diào)用，直接調(diào)用會(huì)報(bào)錯(cuò)；而普通構(gòu)造函數(shù)可以作為普通函數(shù)執(zhí)行。
4. 原型方法：class 定義的方法是不可枚舉的。

Q2：子類構(gòu)造函數(shù)中為什么必須先調(diào)用super()？

參考回答：

在 ES5 的繼承中，是先創(chuàng)建子類的 this，然后再將父類的方法屬性添加到 this 上。

但在 ES6 的繼承中，是先創(chuàng)建父類的實(shí)例對象 this（通過 super()），然后再用子類的構(gòu)造函數(shù)修改這個(gè) this。如果不調(diào)用 super()，子類就拿不到 this 對象。

Q3：如何用 ES5 模擬class的靜態(tài)方法？

參考回答：

在 ES5 中，直接將方法掛載到構(gòu)造函數(shù)函數(shù)名上即可：

function Animal() {}
Animal.eat = function() { console.log('eating'); }; // 模擬靜態(tài)方法

五、 總結(jié)

到此這篇關(guān)于JavaScript ES6 Class類全方位進(jìn)階指南的文章就介紹到這了,更多相關(guān)ES6 Class類指南內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論