Javascript の setTimeout コールバックで「this」キーワードを正しく使用する方法

JavaScript の setTimeout と "this"

JavaScript で setTimeout 関数を使用する場合、this キーワードが内でどのように機能するかを理解することが重要です。コールバック関数。場合によっては、タイムアウト遅延後に参照されたメソッドが未定義であることを示すエラーが発生することがあります。

次のコードを考えてみましょう:

<code class="javascript">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 < document.images.length; i++) {
        if (document.images[i].id.indexOf(name) > 1) {
            return document.images[i];
        }
    }
};</code>

この例では、メソッド関数が呼び出されます。タイムアウトは 5000 ミリ秒です。ただし、タイムアウト後は、コールバック関数内でメソッド 2 関数にアクセスできなくなります。これは、this キーワードがテスト プロトタイプのインスタンスではなくグローバル オブジェクトを参照しているためです。

この問題を解決するには、setTimeout を呼び出す前に this キーワードをコールバック関数にバインドできます。これは、.bind(this) メソッドを使用して実現できます。

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

this キーワードをコールバック関数にバインドすることで、タイムアウトが経過した後でもメソッド 2 関数に確実にアクセスできるようになります。

以上がJavascript の setTimeout コールバックで「this」キーワードを正しく使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。