访问超类上的类字段

Question

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

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

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

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

注意：尝试运行上面的 sn-p 可能行不通，因为我不知道如何使它使用我的 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 不能用于访问类字段，但我该怎么做呢？如果我将Animal 的doSomething 方法更改为传统方法（doSomething() { return 'Hi.'; }），它可以工作，但我宁愿避免传统方法，用他们重新定义this 的方式以及它引起的所有混乱。

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

Answer 1

为什么会这样？我猜 super 不能用于访问类字段

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

但是我应该怎么做呢？如果我将其更改为传统方法，它可以工作

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

避免使用箭头函数when you don't need them，尤其是when they don't work。也可以看看Arrow Functions in Class Properties Might Not Be As Great As We Think。

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

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

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