如何使用ES5原型重構類表達式？

Question

如何使用ES5原型語法重構類表達式？

我正在嘗試使用類表達式擴展本機類。 該代碼可以正常工作，但babel不支持擴展本機類，我希望將來將代碼轉換為ES5。

這是從Google的自定義元素入門中摘錄的代碼。

customElements.define('bigger-img', class extends Image {
    // Give img default size if users don't specify.
    constructor(width = 50, height = 50) {
        super(width * 10, height * 10);
    }
}, { extends: 'img' });

所以問題很簡單：

如何使用與ES5兼容的東西（或實際上與babel兼容，但是這個問題與babel無關）來重構ES2015類表達式。

您能否簡要解釋一下或為我提供參考，以說明ES6類如何與原型一起使用？

Answer 1

ES5中的類擴展有些棘手。 您需要使用原型鏈來完成此任務。 為此，您需要知道原型的作用。

賦予以下功能：

function BaseClass(){
}

您可以為其原型添加屬性：

BaseClass.prototype.doSomething();

創建該類的實例時，可以在創建的對象上調用該函數：

var baseObj = new BaseClass();
baseObj.doSomething();

這是__proto__ ，因為有一個稱為__proto__的屬性，該屬性由生成函數的prototype （在這里： BaseClass ）確定。

如果訪問對象上不直接存在的屬性，則解釋器現在開始瀏覽原型鏈（檢查obj.__proto__是否具有此屬性）。

那么，如果您想擴展BaseClass怎么辦？ 您需要對擴展做兩件事：

• 調用基類的構造函數

• 將原型添加到原型鏈

function DerivedClass(){
    BaseClass.call(this);
}
DerivedClass.prototype.__proto__ = BaseClass.prototype; // That's what happens
DerivedClass.prototype = Object.create( BaseClass.prototype ); // That's how you should do it

生成器函數的prototype成為其生成對象的__proto__屬性。

https://reinteractive.com/posts/235-es6-classes-and-javascript-prototypes

它說的是，新語法只是完成我上面解釋的內容的一種更舒適的方法。 在內部，它應該或多或少完全相同。

正如評論中指出的那樣，您永遠不要手動分配__proto__ ，而應使用Object.create( prototypeObject ) 。