javascript - 如何调用继承类中的基方法？

Question

好吧，我想做一些看似简单的事情:从继承的函数中调用基本方法。我在 babel 的 create-react-scripts 环境中执行此操作，该脚本看起来像(尽可能小):

import * as React from react;

class base {
    constructor() {
        this.data = 'blah';
    }
    foo = () => {
        console.log(this.data);
    }
}

class child extends base{
    constructor() {
        super();
        this.childData = 'ok';
    }
    foo = () => {
        super.foo();
        console.log(this.childData);
    }
}

const Main = class Main extends React.Component {
    constructor(props) {
        super(props);
        const c = new child();
        c.foo();
    }
    render() {
        return <div>test</div>
    }
}

现在这立即提示(只有第一个错误似乎包含信息):

Uncaught TypeError: Cannot read property 'call' of undefined

The above error occurred in the <Main> component:
    in Main (at App.js:62)
    in div (at App.js:62)
    in Route (at App.js:62)
    in Router (at App.js:61)
    in MuiPickersUtilsProvider (at App.js:60)
    in Provider (at App.js:59)
    in ThemeProvider (at App.js:58)
    in div (at App.js:58)
    in App (at src/index.js:7)

Consider adding an error boundary to your tree to customize error handling behavior.

检查显示这是由于 child.foo 函数中的 super.foo() 行导致的。

这里发生了什么？我如何从子 foo 中调用 base 的 foo？

---

相关信息:

list -g create-react-app
└── create-react-app@2.0.3 

  "devDependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.5",
    "babel-preset-flow": "^6.23.0",
    "flow-bin": "^0.99.0",
  },

Answer 1

看起来问题出在箭头函数上。

问题的详细信息在这里:

Arrow Functions in Class Properties Might Not Be As Great As We Think

Arrow functions in class properties won’t be in the prototype and we can’t call them with super.

---

• 我认为箭头函数是一件很棒的事情，我会重命名其中一个并永远忘记覆盖 :)
• 因为您使用的是 Babel，所以这也很有用:autobind-decorator

同时绑定(bind)每一种被认为是不好的做法的方法。它可能会导致大规模的性能问题。只绑定(bind)需要的似乎更好。