コンストラクタへの2つの関数参照を渡すとJavaScriptエラーが発生する

Question

javascriptでオブジェクトのインスタンスを作成したいと思います。私は別のクラスのコンストラクタに2つの関数参照を渡そうとします。しかし、それは以下のようなエラーがスローされます：

this.onFailFunctionは

機能ではありません。しかし、私は一つの基準（するonSuccess）を渡すと、それは動作します。違いは何ですか？

index.htmlを

<script> 

      function onSuccess(data, message) 
      { 
       console.log(data); 
       console.log(message); 
      } 


      function onFail(data, message, errorCode) 
      { 
       console.log(data); 
       console.log(message); 
       console.log(errorCode); 
      } 
      var callBack = new EbookCallBack(onSuccess, onFail); 
      callBack.mainCallback.callSuccessFunction({success:false, message:"Wovvv", errorcode:1, data:"asdsa"}); 

     </script> 

ebookcallback.js

class EbookCallBack 
{ 

    constructor(onSuccessFunction, onFailFunction) 
    { 
     this.onSuccessFunction = onSuccessFunction; 
     this.onFailFunction = onFailFunction; 
     this.mainCallback = new CallBack(this.onSuccess, this.onError); 
    } 

    onSuccess(result) 
    { 
     if(result.success) 
     { 
      this.onSuccessFunction(result.data, result.message); 
     } 
     else 
     { 
      this.onFailFunction(result.data, result.message, result.errorcode); 
     } 
    } 

    onError(message) 
    { 
     if(this.onErrorFunction !== undefined) 
     { 
      this.onErrorFunction(message); 
     } 
    } 


} 

maincallback.js

class CallBack 
{ 

    constructor(onSuccessFunction, onErrorFunction) 
    { 
     this.onSuccessFunction = onSuccessFunction; 
     this.onErrorFunction = onErrorFunction; 
    } 

    callSuccessFunction(data) 
    { 
     this.onSuccessFunction(data); 
    } 

    callErrorFunction(message) 
    { 
     this.onErrorFunction(message); 
    } 

} 

Answer 1

あなたのPROB LEMは、この部分で開始：

this.mainCallback = new CallBack(this.onSuccess, this.onError); 

そう後、この関数でthisが参照する、EbookCallBackオブジェクトへの接続なし（とにかく定義されていない）機能this.onSuccessとthis.onErrorを通過するのでグローバルオブジェクトではなく、EbookCallBackにはもうありません。だから、callSuccessFunction場合

はCallBackで呼び出され、この関数は、あなたが最初にEbookCallBackから渡されたonSuccess関数を呼び出すthis.onSuccessFunction(data)を呼び出しますが、この関数はグローバルオブジェクトのコンテキストではなく1に呼び出されますEbookCallBackの

bindを使用する必要があります。

this.mainCallback = new CallBack(this.onSuccess.bind(this), this.onError.bind(this)); 

（onErrorが定義されていないので、this.onError.bind(this)が今、失敗するでしょう）

Answer 2

"これは" 失われています。 EbookCallback、

onSuccess(result) 
{ 
    if(result.success) 
    { 
     this.onSuccessFunction(result.data, result.message); 
    } 
    else 
    { 
     this.onFailFunction(result.data, result.message, result.errorcode); 
    } 
} 

内部で私はクロームデベロッパーツールにブレークポイントを設定し、あなたがthis.onFailFunctionを取得するとき、「これは」EbookCallbackクラス、コールバッククラスのではありません。あなたがthis.onSuccessFunction(data);を呼び出すとき、コンテキストは

あなたは「この」new CallBack(this.onSuccess.bind(this), this.onFailFunction.bind(this));

---

EDITでnew CallBack(this.onSuccess, this.onError);を交換することによって修正することができますコールバックオブジェクトに設定されているためです

誰もが設けられていないことを私に起こります「バインド」への潜在的な代替

this.mainCallback = new CallBack(this.onSuccess, this.onError);は、次のように変更することができます

this.mainCallback = new CallBack(function(result){ 
    this.onSuccess(result); 
}, function(message){ 
    this.onError(message); 
}); 

このソリューションは、一部の方にとってより直感的です。

Answer 3

これはバインディングの問題のようです。あなたはこれを行うと：

callErrorFunction(message) 
{ 
    this.onErrorFunction(message); 
} 

...あなたが異なるでコードを実行している場合でも、EbookCallBackクラス内の関数を呼び出しているが、あなたのthis変数が現在のオブジェクト（Callback）にバインドされていますクラス。

基本的には、thisをjavascriptで使用するのは非常に難しく、混乱します。あなたがそれを助けることができれば、私は一般的にそれをしないことをお勧めします。プログラマーの多くは、JavaのようにJavaScriptを書こうとし、オブジェクトの中にすべてをラップしますが、実際にはそれを行う必要はありません！ （万が一、以前の人生でJavaコーダーがありましたか？）

javascriptのOOPスタイルは、thisという定型文とバグの多くを追加します。機能的なスタイルははるかに読みやすく保守的です。これをチェックしてください：

//just a plain JS object, not a class 
var myCallbacks = { 
    onSuccess: function(data, message) { 
     //do something 
    }, 
    onFail: function(data, message, errorCode) { 
     //do something else 
    } 
}; 

tryTheThing("fish", myCallbacks); 

function tryTheThing(data, myCallbacks) { 
    if (data === "fish") { 
     myCallbacks.onSuccess(data, "Yay"); 
    } else { 
     myCallbacks.onFail(data, "boo", 51); 
    } 
} 

もっと簡単ですが、正しいですか？クラスや、thisの必要はありません。または、より良い、すでにこの動作をカプセル化され、Javascriptの約束を使用します。

tryTheThing("fish") 
    .then(function(data, message) { 
     //success 
    }).catch(function(data, message, errorcode) { 
     //fail 
    }); 

function tryTheThing(data) { 
    return new Promise(function(resolve, reject) { 
     if (data === "fish") { 
     resolve(data, "yay"); 
     } else { 
     reject(data, "boo", 51); 
     } 
    }); 
} 

約束は今のjavascriptのコア部分とあなたの関数のパラメータを汚染せずにコールバックを処理するための素晴らしい方法です！