如何使用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;
        };
    }
}