setTimeout を非同期的に使用するときに JavaScript で「this」のコンテキストを保持するにはどうすればよいですか?

JavaScript の setTimeout ととらえどころのない「this」

JavaScript で setTimeout 関数を使用するときに発生する一般的な問題は、 「これ」というキーワード。この問題は、setTimeout 呼び出しを含むメソッドが別のメソッドを参照しているが、タイムアウト期間が経過すると、参照されたメソッドが未定義になる場合に発生します。

この問題は、setTimeout の動作方法に起因します。関数が引数として setTimeout に渡されると、その関数内の "this" のコンテキストが失われます。これは、setTimeout が関数を非同期的に実行するためであり、その時点までに「this」の元のコンテキストにアクセスできなくなる可能性があります。

この問題を解決するには、2 つの一般的な解決策があります。

1. binding() メソッドの使用

bind() メソッドを使用すると、setTimeout に渡される関数内で「this」のコンテキストを保持できます。次の例に示すように、関数の最後に「.bind(this)」を追加すると、コンテキストが明示的に保持されます:

setTimeout(function() {
    this.foo();
}.bind(this), 1000);

2。アロー関数

アロー関数は、「this」を周囲のコンテキストに自動的にバインドします。したがって、setTimeout:

setTimeout(() => {
    this.foo();
}, 1000);

に渡されるコールバック関数内で正しいコンテキストを維持するために追加の手順は必要ありません。これらの手法を提供されたコード スニペットに適用すると、コードを次のように変更することで問題を解決できます。

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
};

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