JavaScript の「setTimeout」コールバックでコンテキストを保持する方法は?

setTimeout コールバック使用時のコンテキストの保持

JavaScript で setTimeout を使用する場合、適切なコンテキストをコールバック関数に渡すことが重要になる場合があります。たとえば、this.options.destroyOnHide が true の場合に、1000 ミリ秒後に this.tip.destroy() メソッドを呼び出したいとします。ただし、このメソッドを採用すると、グローバル ウィンドウ オブジェクトを参照することになります。

コンテキストを保持するためのソリューション

JavaScript の進化を通じて、このコンテキストを解決するためのさまざまなアプローチが登場してきました。問題:

• バインディングコンテキスト(ES5): ES5 で導入された binding() メソッドを使用すると、事前定義された this 値を使用して新しい関数を作成でき、グローバル this が入り込むのを防ぎます:

  if (this.options.destroyOnHide) {
  setTimeout(function() { this.tip.destroy() }.bind(this), 1000);
  }

  ログイン後にコピー

• アロー関数 (ES6): アロー関数は、独自の this 値の概念を排除することで、このプロセスを簡素化しました。アロー関数内でこれにアクセスすると、周囲のスコープの this 値を継承します:

  if (this.options.destroyOnHide) {
  setTimeout(() => { this.tip.destroy() }, 1000);
  }

  ログイン後にコピー

• 引数としてコンテキストを渡す (HTML5): HTML5 が導入されましたコンテキストを引数としてコールバックに渡すことを含む標準化されたアプローチfunction:

  if (this.options.destroyOnHide) {
  setTimeout(function(that) { that.tip.destroy() }, 1000, this);
  }

  ログイン後にコピー

これらの手法のいずれかを採用することで、setTimeout コールバックを使用するときに必要なコンテキストを効果的に保持し、コードが期待どおりに動作することを保証できます。

以上がJavaScript の「setTimeout」コールバックでコンテキストを保持する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。