コンテキストを「setTimeout」コールバックに正しく渡すにはどうすればよいですか?

setTimeout コールバックにコンテキストを渡す

setTimeout コールバックに正しいコンテキストを渡すことは、特にオブジェクト メソッドを使用する場合に難しい場合があります。最初にコールバック内でこれを参照すると、グローバル オブジェクトが使用されることがよくあります。

これを解決するには、いくつかのアプローチがあります。

1.参照を保存する (ES5 以前):

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

この手法では、一時変数 (つまり) を使用して、setTimeout の呼び出し元のコンテキストを保存します。

2 。 binding メソッド (ES5 以降):

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

bind メソッドは、事前定義されたこの値を使用して新しい関数を作成します。この場合、これは setTimeout を呼び出す前にオブジェクトに設定されます。

3.アロー関数 (ES6 以降):

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

アロー関数は、setTimeout を呼び出すオブジェクトと同じ字句の this コンテキストを継承します。これにより、バインドしたり保存したりする必要がなくなります。

4. setTimeout への引数の受け渡し (HTML5):

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

HTML5 では、コールバックに追加の引数を渡すことができる機能が setTimeout に導入されました。ここでは、これを引数として渡し、コールバック関数内でアクセスします。

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