Estensione di classi EcmaScript 5 nel codice ES6

Question

Desidero utilizzare EcmaScript 6 (tramite Browserify e Babelify) in un nuovo progetto, ma dipende da librerie di terze parti scritte in ES5. Il problema è la creazione di sottoclassi nel mio progetto che si estendono da quelle presenti nelle librerie.

es:

// 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; 
    } 
} 

Questo quasi funziona, tranne quella creatura() costruttore non viene eseguito. Ho realizzato una soluzione/mod che costruisce oggetto della classe genitore prima e quindi aggiunge roba ad esso:

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; 
    } 
} 

Questo approccio sembra funzionare fino a quando la classe originale non ha funzione di "costruttore".

La mia domanda è: è il modo migliore per estenderli quando si utilizzano le classi di ES6 (salvo chiedere all'autore della libreria di migrare)? O c'è un modo ancora migliore? Mi piacerebbe continuare ad usare la sintassi class {} nel mio progetto.

Answer 1

La tua soluzione funziona correttamente con babel. Il tuo codice viene compilato con il seguente codice 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); 

Come si può vedere dal codice di cui sopra, il costruttore della classe Creature si chiama correttamente. Linea _Creature.call(this, "fish");.

Babel link

ho aggiunto il seguente codice per dimostrare che il pesce è un esempio di Creature così come un esempio di Fish.

var fish = new Fish("test"); 

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

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

uscita:

fish 
test 
true 
true 

Answer 2

costruttori ES5 e classi ES6 possono vivere senza soluzione di continuità in una catena di ereditarietà. Se si traspone il codice, prima di eseguirlo, in ES5 utilizzando strumenti come Babel, è possibile vedere che tutto si traduce in ereditarietà basata su Prototipo. Si prega di guardare questo esempio here che ha sia classi che funzioni di costruzione in tre livelli di catena di ereditarietà. Spero che questo ti aiuti.