3

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

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以及它引起的所有混乱。

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

4

1 回答 1

3

为什么会这样？我猜 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)
}
于 2018-10-15T19:32:33.403 回答