JavaScript で「setTimeout」を使用するときに「this」のコンテキストを保持する方法は?

JavaScript での setTimeout の使用とこれによるコンテキストの保持

JavaScript で setTimeout 関数を使用する場合、その処理方法を認識することが重要ですこの文脈。これは、タイムアウト コールバック内の別のコンテキストで定義されたメソッドを呼び出す場合に特に関係します。

提供されたコード スニペットでは、メソッド関数がメソッド 2 を呼び出し、渡された ID に基づいて画像要素を取得し、その src プロパティを設定します。 。最初は、method2 が正常に実行されます。ただし、setTimeout の遅延後、method2 関数が目的のコンテキスト内で定義されなくなったため、エラーが発生します。

この問題は、setTimeout が新しい実行コンテキストを作成し、this キーワードがデフォルトでグローバル オブジェクトに設定されるために発生します。提供されたコードでは、メソッド関数はテスト プロトタイプのコンテキストを使用して呼び出されますが、タイムアウト コールバックが実行されると、このコンテキストはグローバル オブジェクトに変更されます。

解決策:

タイムアウト コールバック内で this の意図したコンテキストを保持するには、.bind() メソッドを使用してコンテキストのバインドを明示的に設定できます。 setTimeout に渡される関数の末尾に .bind(this) を追加すると、コールバック関数内の this が意図したコンテキストを参照するようにできます。

更新されたコード スニペット内:

test.prototype.method = function()
{
    //method2 returns image based on the id passed
    this.method2('useSomeElement').src = "http://www.some.url";
    timeDelay = window.setTimeout(this.method.bind(this), 5000);
    //                                       ^^^^^^^^^^^ <- fix context
};

.bind(this) を追加すると、コールバック関数内の this キーワードがテスト プロトタイプにバインドされ、setTimeout の遅延後でもプロトタイプ メソッドのコンテキスト内でメソッド 2 を正しく呼び出すことができます。

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