「setTimeout」コールバックで正しい「this」コンテキストを維持する方法は?

setTimeout コールバックでこのコンテキストが正しいことを確認する

setTimeout を利用してコールバック関数をスケジュールする場合、関数がそのコンテキストを確実に保持することが重要です。必要なコンテキスト。ただし、これがコールバック内のグローバル オブジェクトを参照する場合に問題が発生します。

提供された例では:

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

これは、意図したオブジェクトではなく、グローバル ウィンドウを参照します。これを防ぐには、いくつかの方法があります。

1. コンテキストを保存します。

setTimeout を呼び出す前に、現在のコンテキストへの参照を保存します。

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

2. バインドメソッドを使用する(ES5):

バインドを使用して、正しいコンテキストにバインドされた新しい関数を作成します。

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

3. アロー関数を使用する (ES6):

アロー関数は、その関数から this 値を自動的に継承します。字句スコープ。

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

4. コールバックに引数を渡す (HTML5 ):

HTML5 のタイマーを使用すると、コールバックに引数を渡すことができます。

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

これのコンテキストは方法によって異なる可能性があることに注意してください関数が呼び出されます。望ましい動作を確保するには、利用可能な言語機能に基づいて適切なアプローチを検討してください。

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