JQuery遅延の変更 "this"

Question

私は、javascriptオブジェクトに遅延メソッドを実行させようとしています。また、同じオブジェクト内の.done（）関数を呼び出そうとしています。私は問題を抱えています。なぜなら、「this」はそれを呼び出すオブジェクトではなく、遅延オブジェクトになるからです。

PageObject.prototype.successFunction = function() { 
    console.log(arguments); 
    return console.log(this.name + " Success function called"); 
}; 

PageObject.prototype.loadPage = function(url) { 
    return $.when($.mobile.loadPage("pages/" + url)) 
    .done(this.successFunction); 
}; 

var pg = new PageObject(); 
pg.loadPage("test.html"); 

「this」をsuccessFunctionに送信するにはどうすればよいですか？このPageObjectは他の人も同様に拡張される予定ですので、successFunctionを実行するときに「this」を知っておくと非常に便利です。

シンプルなように、おそらく簡単な答えがあります。私は.apply（）を探していたが、それが助けになったのか分からなかった。スタックオーバーフローのこのポストは少し役に立ちましたが、それを.done（）関数に入れた分は壊れました。

Functions as parameters (with parameters) -- JavaScript

Answer 1

jQueryのproxyは、特定のコンテキストにバインドされた関数を返します：

PageObject.prototype.loadPage = function(url) { 
    return $.when($.mobile.loadPage("pages/" + url)) 
    .done($.proxy(this.successFunction, this)); 
}; 

ES5のbind同様に動作しますが、古いブラウザ

PageObject.prototype.loadPage = function(url) { 
    return $.when($.mobile.loadPage("pages/" + url)) 
    .done(this.successFunction.bind(this)); 
}; 

にシムされる必要があるにもあります

applyおよびcallは、関数immediatel yを指定されたコンテキストで返しますが、proxyとbindは、後で使用するか、他の関数に渡すことができる関数を返します。

Answer 2

this JavaScriptの「変数」は「呼び出し元オブジェクト」と呼ばれ、囲み関数が呼び出されたとき（定義されていないとき）に決定されます。いくつかの異なる方法を設定することができます：

は

1. あなたは.オペレータ（例えばmyObject.myFunction()）を使用して設定することができます
2. あなたは
3. することができます（下の関数のcall()やapply()方法を使用して設定することができます上記の方法のどれもが、何か他のもの

に設定していない場合にバインドES5は）恒久的機能の0​​方法

を使用することによってそれはグローバルオブジェクトにデフォルト設定されます

理解しておくべき重要なことは、（上記の方法3を除いて）、それが呼び出されたときにどのように関数が呼び出され、どのように参照されるのか、どのように格納されるのか、

あなたのケースでは、jQueryによって呼び出される関数リファレンスとしてthis.successFunctionを渡していますが、それはその関数を参照しているだけなので、そのようには呼び出されません。呼び出されるべきである）。

ありますが、jQueryの$.proxy()またはES5の.bind()方法で使用することができますいくつかの空想のトリックがありますが、それはそれまで来るとき、それを処理する最も簡単な方法は、単純に閉鎖スコープの変数を介してthisを保持し、使用することです関数ラッパー：我々は、明示的にloadPageの呼び出し元のオブジェクトと同じようにオブジェクトを呼び出しsuccessFunction年代をバインドする方法1を使用している

PageObject.prototype.loadPage = function(url) { 
    var self = this; 
    return $.when($.mobile.loadPage("pages/" + url)) 
      .done(function() { self.successFunction(); }); 
}; 

注意。短く、シンプルで、はっきりしていて、ES3の下でうまく動作し、jQueryに依存しません。