JavaScript での setTimeout の使用とコンテキストの保持

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

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

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

Solution:

タイムアウト コールバック内で 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 を正しく呼び出すことができるようになります。