如何在Javascript的setTimeout回呼中正確使用「this」關鍵字？

JavaScript 中的setTimeout 和「this」

在JavaScript 中使用setTimeout 函數時，了解this 關鍵字在JavaScriptScript 中的工作原理至關重要回調函數。在某些情況下，您可能會遇到錯誤，指出在逾時延遲後引用的方法未定義。

請考慮以下程式碼：

<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 毫秒。但是，超時後，在回調函數中將無法再存取 method2 函數。這是因為 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 關鍵字綁定到回調函數，您可以確保 method2 函數即使在超時後仍然可以存取。

以上是如何在Javascript的setTimeout回呼中正確使用「this」關鍵字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！