如何使用Ecmascript 6類擴展對象文字類

Question

我有一個定義為object literal的基class ，其方法在構造函數的作用域內定義。 像這樣：

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

如何使用ES6 class語法擴展NodeMappingAbstract ？ 我嘗試使用extends和super() ：

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

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

但是當我實例化它並像這樣調用mapToContent ：

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

我收到Error: Not implemented ，這意味着使用了NodeMappingAbstract的實現。

Answer 1

這里的問題是您將方法直接附加到NodeMappingAbstract （ this ）的實例上，而不是函數的prototype上。

當JavaScript對某個對象屬性執行查找時，它首先檢查這些對象的直接自身屬性，這些屬性是在您向this分配某些內容時可用的。 只有當它沒有發現以這種方式立即可用的屬性時，它才會轉向prototype 。 因此，盡管您正在擴展NodeMappingAbstract並在prototype上定義方法（通過class NodeMappingAbstract ），但實際上並沒有覆蓋NodeMappingAbstract實例化時this分配的屬性。

因此，將方法聲明移到函數體之外並移至其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);
};

Answer 2

您應該將方法放在ES5類的原型上（一如既往）。

如果在構造函數中定義它們，並將它們創建為實例屬性（遮蓋從原型繼承的任何內容），則在覆蓋它們時必須執行相同的操作：

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