new.target 如何幫助我們理解 ES6 類別中的繼承？

理解JavaScript 中的「new.target」

「new.target」一詞在ECMAScript 2015 規格（14.2.3 和14.2.16）中很少出現，對其目的提出疑問。有趣的是，它的全名是 NewTarget，可在第 12.3.8 節中找到。

元資料和 NewTarget

NewTarget 是一個元屬性，用於擷取目前範圍內 [[NewTarget]] 的目前值非箭頭函數環境。呼叫函數時，會指派一個 [[NewTarget]] 值，類似 this 綁定。

辨識建構函式呼叫

以前，無法偵測函式是否作為建構函式呼叫明確支援。然而，NewTarget 透過揭示 [[Construct]] 內部方法是否創建了環境記錄來解決這個問題。根據§8.1.1.3，如果環境記錄是由 [[Construct]] 建立的，則 [[NewTarget]] 保存 [[Construct]] newTarget 參數的值。否則，它仍然是未定義的。

ES6 類別中的繼承

雖然語法糖，ES6 類別提供了真正的繼承。這就是NewTarget發揮關鍵作用的地方。當使用 new X 呼叫類別建構函數時， this 值最初是未設定的。建構函式中的 super() 呼叫建立對象，但繼承自最初呼叫的建構函式的 .prototype。

NewTarget 捕捉接收新呼叫的最外層建構子。它不是當前正在執行的建構函數。該值是傳遞到 OrdinaryCreateFromConstructor 過程的值，確保實例正確繼承所需的原型。

範例

為了說明這一點，請考慮以下類別：

<code class="javascript">class Parent {
    constructor() {
        // implicit (from the `super` call)
        //    new.target = Child;
        // implicit (because `Parent` doesn't extend anything):
        //    this = Object.create(new.target.prototype);
        console.log(new.target) // Child!
    }
}
class Child extends Parent {
    constructor() {
        // `this` is uninitialised (and would throw if accessed)
        // implicit (from the `new` call):
        //    new.target = Child 
        super(); // this = Reflect.construct(Parent, [], new.target);
        console.log(this);
    }
}
new Child;</code>

在這個例子中，NewTarget 允許Parent 類別認識到它是透過Child 類別作為構造函數呼叫的。然後，Child 類別在其 super() 呼叫期間利用此資訊來正確建立繼承。

以上是new.target 如何幫助我們理解 ES6 類別中的繼承？的詳細內容。更多資訊請關注PHP中文網其他相關文章！