JavaScript の `setInterval()` で `this` コンテキストを保持する方法は?

JavaScript の setInterval ハンドラーでの「this」参照の保持

JavaScript の setInterval() 関数を使用する場合、よく「this」が発生します。問題。これは、間隔ハンドラー関数内からオブジェクトのプロパティまたはメソッドにアクセスする必要がある場合に発生します。

次のコードを考えてみましょう:

prefs: null,
startup: function() {
  // init prefs
  ...
  this.retrieve_rate();
  this.intervalID = setInterval(this.retrieve_rate, this.INTERVAL);
},

retrieve_rate: function() {
  var ajax = null;
  ajax = new XMLHttpRequest();
  ajax.open('GET', 'http://xyz.example', true);
  ajax.onload = function() {
    // access prefs here
  }
}

この例では、prefs プロパティにアクセスしたいと考えています。 ajax.onload ハンドラー関数内から。ただし、間隔ハンドラーで this 参照が失われているため、これは期待どおりに機能しません。

これを解決するには、bind() メソッドを使用して、this 参照をバインドする新しい関数を作成します。その方法は次のとおりです。

this.intervalID = setInterval(this.retrieve_rate.bind(this), this.INTERVAL);

bind() を使用して、this 参照が元のオブジェクト (this) にバインドされた新しい関数を作成します。これにより、prefs プロパティが ajax.onload ハンドラーで適切に参照されるようになります。

以上がJavaScript の `setInterval()` で `this` コンテキストを保持する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。