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

setTimeout 関数を使用すると、開発者は、後続のメソッド呼び出しが失われるという問題に遭遇することがよくあります。意図したコンテキストにより、一見未定義のメソッドが生成されます。これは通常、「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, 5000);
};

test.prototype.method2 = function(name) {
    for (var i = 0; i  1) {
            return document.images[i];
        }
    }
};

最初のページ読み込みでは、method2 関数は意図したとおりに動作します。ただし、タイムアウトを設定した後、メソッド 2 を呼び出すと、メソッド 2 が未定義であることを示すエラーが発生します。

解決策:

中心的な問題は、setTimeout の処理方法にあります。このキーワード。 setTimeout(this.method, 5000) を使用してタイムアウトを設定すると、コンテキストが失われ、エラーが発生します。

この問題に対する賢明な解決策は、bind() メソッドを使用することです。メソッド呼び出しの最後に「.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
};

この変更により、「this」のコンテキストが適切にバインドされ、タイムアウトが経過した後もメソッド 2 が意図したとおりに機能し続けることができるようになります。このアプローチは洗練されており、正しい実行コンテキストを維持するのに効果的です。