javascript - 在javascript es-06中覆盖函数时，调用父类的函数而不是子类的函数

我在react-native中使用javascript es-06语法开发移动应用程序。这是我的代码：


  超类：

export class ApiCallback {

    onResponse = (responseJson) => {
        console.log("super response")
    }

    onError = (error) => {
        console.log("super error")
    }

}

  基类：

export class LoginCallback extends ApiCallback {

    onResponse(responseJson) {
        super.onResponse(responseJson)
        console.log(responseJson)
    }

    onError(error) {
        super.onError()
        console.error(error)
    }
}

  用法：

export class AuthenticationInteractor {

     doLogIn(loginCallback: LoginCallback) {

            fetch("http://google.com",
                {
                    method: "GET"
                })
                .then((responseJson) => {
                    loginCallback.onResponse(responseJson)
                })
                .catch((error) => {
                    loginCallback.onError(error)
                })

        }
}

和

new AuthenticationInteractor().doLogIn(new LoginCallback())

在这里，它调用父类的onResponse（）函数并打印，而不是调用基类方法（后者在onResponse（）中打印所有共振json）。


  “超级反应”


作为基础类的onResponse（）函数的结果。

最佳答案

简单的答案是：您不应该将箭头函数用作类中的方法。

export class ApiCallback {

    onResponse(responseJson) {
        console.log("super response")
    }

    onError(error) {
        console.log("super error")
    }

}

复杂的答案是：当您将类方法声明为箭头函数时，它不会被添加到类原型中，而是会在初始化时被添加到对象中。在您的情况下，您将LoginCallback方法添加到原型中，但是在初始化时，它们被父类中的方法覆盖。

因此，最好始终将经典函数用作类方法。但是不要忘记将上下文绑定到它们。