javascriptの関数をオーバーライドしているときに、親クラスの関数がサブクラスの関数の代わりに呼び出されました。

Question

私はモバイルアプリケーションの開発に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（）内のすべてのresonse JSONを印刷している）は、基本クラスのメソッドを呼び出します

"スーパーレスポンス"

の結果は、基本クラスのonResponse（）関数から得られます。

Answer 1

簡単な答えは、クラスのメソッドとして矢印関数を使用しないでください。

export class ApiCallback { 

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

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

} 

複雑な答えは：あなたは、矢印関数としてクラスメソッドを宣言するときには、クラスのプロトタイプに追加されることはありませんが、初期設定にオブジェクトに追加されます。あなたの場合は、プロトタイプにLoginCallbackメソッドを追加しますが、初期化時には親クラスのメソッドで上書きされます。

したがって、クラシック関数を常にクラスメソッドとして使用する方が良いです。しかし、コンテキストをそれらにバインドすることを忘れないでください。

Answer 2

以下のスニペットを参照してください。機能定義の理解が向上します。 abc = function(){}さんの優先度がfunction abc(){}より大きいと思います。

派生クラスの関数を置き換えるには、同じ方法で関数を定義する必要があります。親クラスであなたのケースを使用しているので、

onResponse（responseJson）{はconsole.log（ "superresponse"）}

は、問題を解決します。

abc = function(){ 
 
    console.log("abc"); 
 
} 
 
function abc(){ 
 
console.log("def"); 
 
} 
 

 
abc(); 
 

 
function def(){ 
 
    console.log("abc"); 
 
} 
 
function def(){ 
 
console.log("def"); 
 
} 
 

 
def(); 
 

 
var ghi =function(){ 
 
    console.log("abc"); 
 
} 
 
var ghi = function(){ 
 
console.log("def"); 
 
} 
 

 
ghi();