访问超类的类字段

Question

我有一个包含以下代码的文件：

class Animal {
    doSomething = () => {
        return 'Hi.';
    };
}

class Dog extends Animal {
    doSomething = () => {
        return super.doSomething() + ' Woof!';
    };
}

console.log(new Dog().doSomething());

注意：尝试运行上面的代码片段可能不起作用，因为我不知道如何让它使用我的 Babal 设置。

无论如何，当我使用 Babel 编译它并在 Node 中运行它时，我收到以下错误：

/Users/elias/src/classFieldTest/build/classFieldTest.js:15
            return super.doSomething() + ' Woof!';
                         ^

TypeError: (intermediate value).doSomething is not a function
    at Dog.doSomething (/Users/elias/src/classFieldTest/build/classFieldTest.js:15:26)
    at Object.<anonymous> (/Users/elias/src/classFieldTest/build/classFieldTest.js:21:23)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Function.Module.runMain (module.js:693:10)
    at startup (bootstrap_node.js:188:16)
    at bootstrap_node.js:609:3

我使用带有stage-2预设的 Babel 6.26.0 和 Node 8.11.1。如果有人关心的话，我可以显示我正在使用的命令。

为什么会发生这种情况？我猜它super不能用于访问类字段，但我该怎么办呢？如果我将doSomething的方法更改Animal为传统方法 ( doSomething() { return 'Hi.'; })，它会起作用，但我宁愿避免传统方法，因为它们重新定义的方式this及其造成的所有混乱。

有没有办法访问超类的类字段？

Answer 1

为什么会发生这种情况？我猜测 super 不能用于访问类字段

是的。类字段是实例属性，但super尝试访问超类原型对象上的属性。您的Animal类根本没有doSomething方法 - 相反，每个Animal对象都有一个包含绑定函数的属性。

但我该怎么办呢？如果我把它改成传统的方法，它就有效

是的，你应该这样做。这就是方法和super工作原理。

当不需要箭头函数时，尤其是当它们不起作用时，请避免使用它们。另请参阅类属性中的箭头函数可能不像我们想象的那么好。

有没有办法访问超类的类字段？

是的 - 它是一个实例属性，您可以在覆盖它之前在构造函数中访问它：

class Animal {
    constructor() {
        this.doSomething = () => {
             return 'Hi.';
        };
    }
}

class Dog extends Animal {
    constructor() {
        super();
        const superDoSomething = this.doSomething;
        this.doSomething = () => {
            return superDoSomething() + ' Woof!';
        };
    }
}

或者，使用类字段提案并且没有显式构造函数：

class Animal {
    doSomething = () => {
        return 'Hi.';
    }
}

class Dog extends Animal {
    doSomething = (superDoSomething => () => {
        return superDoSomething() + ' Woof!';
    })(this.doSomething)
}