So erweitern Sie eine Objektliteralklasse mit Ecmascript 6 Klassen

Question

Ich habe eine Basis class definiert als object literal, mit Methoden im Konstruktor Bereich definiert. Wie folgt aus:

var NodeMappingAbstract = function NodeMappingAbstract() { 

    this.mapToContent = function (obj) { 
     throw new Error('Not implemented'); 
    }; 

    this.getInfo = function (data) { 
     throw new Error('Not implemented'); 
    }; 

    this.normalizeUri = function normalizeUri(uri) { 
     return uriNormalizer.normalize(uri); 
    }; 
}; 

Wie erweitere ich die NodeMappingAbstract mit ES6 class Syntax? Ich versuchte extends und super() mit:

class SomeMapping extends NodeMappingAbstract{ 
    constructor(){ 
     super(); 
    } 

    mapToContent(rawElement) { 
     console.warn('mapContent called'); 
     return rawElement; 
    } 
} 

Aber wenn ich es instanziiert und rufen mapToContent wie folgt aus:

let m = new SomeMapping(); 
m.mapToContent(); 

ich Error: Not implemented, die die Umsetzung der NodeMappingAbstract Mittel verwendet.

Answer 1

Sie sollten Ihre Methoden auf den Prototyp Ihrer ES5-Klasse (wie Sie immer sollten) setzen.

Wenn Sie sie im Konstruktor definieren, und erstellen Sie sie als Instanz Eigenschaften (die Schatten etwas vom Prototyp geerbt), werden Sie das gleiche zu tun haben, wenn sie zu überschreiben:

hier

class SomeMapping extends NodeMappingAbstract{ 
    constructor(){ 
     super(); 
     this.mapToContent = function(rawElement) { 
      console.warn('mapContent called'); 
      return rawElement; 
     }; 
    } 
} 

Answer 2

Das Problem wird dass Sie die Methoden direkt an eine Instanz von (this) anhängen und nicht an die prototype der Funktion.

Wenn JavaScript eine Suche nach einer Objekteigenschaft durchführt, prüft es zuerst die Objekte sofort eigene Eigenschaften, die zur Verfügung gestellt werden, wenn Sie this etwas zuweisen. Nur wenn das Objekt auf diese Weise nicht sofort verfügbar ist, wendet es sich an prototype. Also, obwohl Sie die erweitern und Methoden auf die (über die class Zucker) definieren, überschreiben Sie nicht tatsächlich die Eigenschaften, die this Instanziierung innerhalb zugeordnet sind.

also die Methode Erklärungen bewegen außerhalb des Funktionskörpers und auf seine prototype:

var NodeMappingAbstract = function NodeMappingAbstract() {}; 

NodeMappingAbstract.prototype.mapToContent = function (obj) { 
    throw new Error('Not implemented'); 
}; 

NodeMappingAbstract.prototype.getInfo = function (data) { 
    throw new Error('Not implemented'); 
}; 

NodeMappingAbstract.prototype.normalizeUri = function normalizeUri (uri) { 
    return uriNormalizer.normalize(uri); 
};