12

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を実行するときに「これ」を知っていると非常に便利です。

簡単そうに見えますが、おそらく簡単な答えがあります。.apply()を調べていましたが、それが役に立ったかどうかはわかりません。スタックオーバーフローに関するこの投稿は少し役に立ちましたが、.done()関数に入れた瞬間に壊れました。

パラメータとして機能(パラメータ付き)-JavaScript

4

2 に答える 2

15

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

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));
};

applycall指定されたコンテキストで関数をすぐに実行できますが、後で使用したり、他の関数に渡すことができる関数を返しますproxybind

于 2012-09-06T01:40:11.983 に答える
2

JavaScriptのthis「変数」は「呼び出し元オブジェクト」と呼ばれ、それを囲む関数が呼び出されたときに決定されます(定義されたときではありません)。いくつかの異なる方法で設定できます。

  1. .演算子(例myObject.myFunction())を使用して設定できます
  2. 関数call()またはapply()メソッドを使用して設定できます
  3. bind()関数のメソッドを使用して、(ES5の下で)永続的にバインドできます
  4. 上記のメソッドのいずれもそれを他のものに設定しない場合、デフォルトでグローバルオブジェクトになります

理解しておくべき重要なことは、(上記の方法3を除いて)関数が呼び出されたときの呼び出し方法、参照方法、保存方法、作成場所ではないということです。

あなたの場合、this.successFunctionjQueryによって呼び出される関数参照として渡していますが、そのようには呼び出されません(関数への参照を取得しただけであり、その関数の呼び出し方法に関する情報はないため)。

$.proxy()jQueryまたはES5のメソッドで使用できるいくつかの凝ったトリックがありますが.bind()、それを処理する最も簡単な方法はthis、クロージャースコープの変数を保持し、関数ラッパーを使用することです。

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

メソッド1を使用してsuccessFunction、の呼び出し元オブジェクトをloadPageの呼び出し元オブジェクトと同じになるように明示的にバインドしていることに注意してください。短く、シンプルで、明確で、ES3で正常に動作し、jQueryに依存しません。

于 2012-09-06T03:06:58.217 に答える