setTimeout を使用する場合、JavaScript で「this」に関するコンテキストの問題を処理する方法

JavaScript の setTimeout と "this"

クラス メソッド内で setTimeout 関数を使用すると、クラス内の別のメソッド (例: 、提供されたコードの「method2」) は、タイムアウト後は未定義になります。これは、JavaScript がネストされた関数内で this キーワードを処理する方法に起因します。

コード例では、指定された遅延を指定して setTimeout 関数を使用して、テスト オブジェクト内のメソッド関数を呼び出しています。 Method2 関数は、渡された ID に基づいてイメージ要素を取得するために、メソッド関数内で呼び出されます。最初は問題なく動作します。

ただし、setTimeout 関数内でバインドされている方法が原因で、タイムアウト後、method2 関数は未定義になります。デフォルトでは、これは setTimeout 内でコールバックとして呼び出されたときにグローバル オブジェクトを参照します。

この問題を解決するには、setTimeout に渡される関数の末尾に .bind(this) を追加することが 1 つの解決策です。これにより、このコンテキストがオブジェクト (この場合はテスト オブジェクト) に正しくバインドされることが保証されます。変更されたコード:

<code class="js">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
};</code>

.bind(this) を使用すると、method2 関数が setTimeout コールバック内で適切な this コンテキストを保持できるようになり、画像要素を正常に取得して操作できるようになります。

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