在ES6代碼中擴展EcmaScript 5類

我想在新項目中使用EcmaScript 6（通過Browserify和Babelify），但它取決於ES5中編寫的第三方庫。問題是在我的項目中創建子類，這些子類從庫中的子類延伸出來。在ES6代碼中擴展EcmaScript 5類

E.g：

// Library written in ES5 
function Creature(type) { 
    this.type = type; 
} 

// my code in ES6 

class Fish extends Creature { 
    constructor(name) { 
    super("fish"); 
    this.name = name; 
    } 
}

這幾乎工程，除了生物（）構造函數無法運行。我設計了一個解決方法/破解它首先構造父類的對象，然後追加的東西吧：

class Fish extends Creature { 
    constructor(name) { 
    super("throw away"); //have to have this or it wont compile 
    let obj = new Creature("fish"); 
    obj.name = name; 
    return obj; 
    } 
}

這種做法似乎只要工作，因爲原來的類沒有「構造」的功能。

我的問題是：是使用ES6的類時擴展它們的最佳方式（保存從請求庫的作者遷移）？還是有更好的辦法？我想繼續在我的項目中使用class {}語法。

來源

2015-05-25 Arnelism

Babel依靠ES5類正確設置'Creature.prototype.constructor = Creature'，也許你沒有做到這一點？如果父類是絕對基類，那應該自動發生，但是如果父類有它自己的父類，那麼可能它有錯誤的'.constructor'。 – loganfsmyth

您的解決方案使用babel可以正常工作。您的代碼被編譯爲以下ES5代碼。

// Library written in ES5 
"use strict"; 

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; } 

function Creature(type) { 
    this.type = type; 
} 

// my code in ES6 

var Fish = (function (_Creature) { 
    function Fish(name) { 
    _classCallCheck(this, Fish); 

    _Creature.call(this, "fish"); 
    this.name = name; 
    } 

    _inherits(Fish, _Creature); 

    return Fish; 
})(Creature);

正如你可以從上面的代碼中看到，Creature類的構造函數正確調用。行_Creature.call(this, "fish");。

Babel link

添加以下代碼以證明魚的Creature一個實例以及的Fish一個實例。

var fish = new Fish("test"); 

console.log(fish.type); 
console.log(fish.name); 

console.log(fish instanceof Creature); 
console.log(fish instanceof Fish);

輸出：

fish 
test 
true 
true

來源

2015-05-25 21:44:29

ES5構造函數和ES6類可以在繼承鏈無縫住。如果您使用Babel等工具將您的代碼在運行前轉儲到ES5中，您可以看到它全部轉換爲基於Prototype的繼承。請看這個例子here，它有三個級別的繼承鏈中的類和構造函數。希望這可以幫助。

來源

2016-02-03 01:00:43

在ES6代碼中擴展EcmaScript 5類

回答

相關問題