javascript - Javascript コールバックと「this」

Question

次の Javascript コードがあり、以下に示すようにコールバックを機能させようとしています。「123」が含まれるアラートを表示したい。

var A = function(arg){
    this.storedArg = arg;
    this.callback = function(){ alert(this.storedArg); }
}

var B = function() {
    this.doCallback = function(callback){ callback(); }
}       

var pubCallback = function(){ alert('Public callback') };

var a = new A(123);
var b = new B();

b.doCallback(pubCallback); // works as expected
b.doCallback(a.callback);  // want 123, get undefined

何が起こっているのか理解していますが、それを修正する方法がわかりません。オブジェクトを参照するコールバック関数を取得するにはどうすればよいですか? 私の場合、A は変更できますが、B は変更できません。

score 2 · Accepted Answer

したがって、必要なのは、コンテキストをに渡すことですdoCallBack。

例えば

doCallBack = function (callback, callee) { 
    callback.apply(callee);
}

したがって、次のようにします。

b.doCallBack(a.callback, a);

B を変更できない場合は、A 内でクロージャーを使用できます。

var A = function (arg) {
    var self = this;
    this.storedArg = arg;
    this.callback = function () { alert(self.storedArg); }
}

score 2 · Accepted Answer

this変数に入れることで、必要なスコープを保持する変数を作成できますthat

var A = function(arg){
    this.storedArg = arg;
    var that = this; // Add this!
    this.callback = function(){ alert(that.storedArg); }
}

ここでの動作デモ: http://jsfiddle.net/vdM5t/

score 1 · Accepted Answer

内部A.callback関数のため、オブジェクトを参照するのでthisはなく参照しAますwindow。

var A = function(arg){
    this.storedArg = arg;
    this.callback = function(){ alert(this.storedArg); }
    -----------------------------------^-----------------
}

あなたはこれを試すことができます、

var A = function(arg){
    this.storedArg = arg;
    var that = this;
    this.callback = function(){ alert(that.storedArg); }
}

var B = function() {
    this.doCallback = function(callback){ callback(); }
}       

var pubCallback = function(){ alert('Public callback') };

var a = new A(123);
var b = new B();

b.doCallback(pubCallback); // works as expected
b.doCallback(a.callback);  // alerts 123

score 1 · Accepted Answer

コールバックを実行するコンテキストを渡す必要があります。

var B = function() {
    this.doCallback = function(callback, context) {
        callback.apply(context); 
    };
};

b.doCallback(a.callback, a); // 123

http://jsfiddle.net/a9N66/

score 1 · Accepted Answer

何が起こっているのか理解しています (2 回目のコールバック中、「これ」は a ではなく b です)

いいえ、JS は何かが起こり得るクラスベースの言語ではありません。が( のように)function(){ alert(this.storedArg);呼び出されるだけの場合、キーワードはグローバルオブジェクト ( ) を指します。callback();b.doCallbackthiswindow

それを回避するには、次のように変更Aする必要があります

var A = function(arg){
    var that = this; // store reference to the current A object
    this.storedArg = arg;
    this.callback = function(){
        alert(that.storedArg); // and use that reference now instead of "this"
    };
}

プロパティが変更されるとは思わない場合は、storedArgより単純にすることもできます。

var A = function(arg){
    this.storedArg = arg;
    this.callback = function(){
        alert(arg); // just use the argument of the A function,
                    // which is still in the variable scope
    };
}

score 0 · Accepted Answer

これを行う場合:

b.doCallback(a.callback);

forcallbackを使用するように指示せずにa の関数を呼び出すだけです。そのため、グローバルオブジェクトがに使用されます。athisthis

1 つの解決策は、そのコールバックをラップすることです。

b.doCallback(function() { a.callback(); });

他の解決策には、コールバックをにバインドする、 jQuery.proxy()aを使用する(これは私の最初の解決策を実行するための凝った方法です)、またはapplyを使用してに渡して呼び出すことが含まれます。adoCallbackcallbacka

javascript - Javascript コールバックと「this」

6 に答える 6

Related

Reference