setInterval と setTimeout を使用したプロトタイプ メソッドでの「this」参照の処理: 解決策は何ですか?

setInterval と setTimeout を使用したプロトタイプ メソッドでの this 参照の処理

JavaScript では、プロトタイプ メソッドは、抽出されて別の場所に渡されると、this の関連付けを失います。次のコードを考えてみましょう:

function Foo() {}
Foo.prototype = {
  bar: function () {
    this.baz();
  },
  baz: function () {
    this.draw();
    requestAnimFrame(this.baz);
  }
};

このコードは、setInterval または setTimeout コールバック内で適切にバインドされていないため、エラーで失敗します。

解決策:

この問題を処理するにはいくつかの方法があります:

匿名関数でメソッド呼び出しをラップする:

var that = this;
setInterval(function () {
  return that.baz();
}, 1000);

これは、ヘルパー変数。

ファット アロー関数でのラップ メソッド呼び出し:

setInterval(() => this.baz(), 1000);

ファット アロー匿名関数は、周囲の関数から this を維持します。

バインディング関数を使用する:

setInterval(this.baz.bind(this), 1000);

// dojo toolkit example:
setInterval(dojo.hitch(this, 'baz'), 10);

Function.prototype.bind などのバインディング関数または同等のライブラリを使用すると、このコンテキストを明示的にバインドできます。

以上がsetInterval と setTimeout を使用したプロトタイプ メソッドでの「this」参照の処理: 解決策は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。