Question

我想在ecma2015中做一些扩展，我似乎无法理解它是如何工作的。我用普通的JavaScript编写了一个方法，就像$ .extend（）一样，但是我想把代码升级到类。

以下是我尝试过的示例代码。

var Test = ((window, document, undefined) => {
    class Defaults {
        constructor(options) {
            this.options = options || {};
            this.options.name = 'name';
            this.options.age = '23';
        }
    }

    class Test extends Defaults {
        constructor(selector, options) {
            super();
            this.selector = document.querySelector(selector);
            this.options = options;
        }

        createTest() {
            var div = document.createElement('div');
            this.selector.appendChild(div);
        }

    }

    return Test; 
})(window, document);

在我这样打电话之后：

var test = new Test('#test', {
    name: 'nameInInstance'
});

test.createTest();

document.querySelector('#test').innerHTML = JSON.stringify(test.options);

现在我看到的只是实例中的名字。

为什么没有将年龄传给孩子班？我错过了什么？

Answer 1

你的Test构造函数a）没有将选项传递给super调用b）只是用参数覆盖.options属性，而不是关心任何默认值。你应该做的

class Test extends Defaults {
    constructor(selector, options) {
        super(options);
        this.selector = document.querySelector(selector);
    }
    …

尽管如此，您的Defaults课程并未完全使用最佳做法。它确实改变了它的参数，没有构造函数应该做的，最重要的是默认值总是覆盖传入的选项，而你实际上却想要反过来。你应该手动复制它们：

class Defaults {
    constructor(options) {
        this.options = Object.assign({
            name: 'name',
            age: '23'
        }, options);
    }
}

我建议不要在这里使用继承，因为Defaults仅用作Test的超类，它应该已合并到它中或已成为一个简单的辅助函数;但是我们假设你只是为了演示而这样做。

ecma2015扩展类javascript

1 个答案: