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

我想使用類表達式來擴展本機類。此代碼工作正常，但擴展本地類是not supported by babel，我想在未來將我的代碼轉換爲ES5。

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兼容的東西類ES2015表達（或只是巴貝爾兼容真的，但這個問題是不是真的與巴別塔）。

您可以簡要解釋一下，或者讓我參考一下解釋ES6類如何與原型一起工作？

來源

2017-03-06 Rico Kahler

如果您只想與Babel兼容，Babel當然可以將您的ES6類定義爲ES5兼容代碼。 – jfriend00

ES5中的類擴展有點棘手。你需要使用原型鏈來實現這一點。要做到這一點，你需要知道原型的功能。

鑑於以下功能：

function BaseClass(){ 
}

您可以將屬性添加到它的原型：

BaseClass.prototype.doSomething();

當創建一個類的實例，你可以調用創建的對象上的功能：

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

這是有效的，因爲有一個屬性叫做__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)來代替。

來源

2017-03-06 02:21:05 Psi

喜歡使用['Object.create']（https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create（）），而不是分配'prototype .__ proto__ ' – Phil

是的，但我想指出原型鏈的工作原理 – Psi

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

回答

相關問題