當this 爭論時：理解回呼函數中的'this'

在JavaScript 中，函數呼叫中this 的值由執行該函數的上下文。然而，當將 this 作為參數傳遞時，規則可能會變得複雜。

具體來說，會出現以下情況：當回呼函數作為參數傳遞時，為什麼不將 this 設定為呼叫的函數回呼？

理解'this' 的層次結構

要理解為什麼this 被設定在它所在的位置，我們需要考慮函數呼叫的層次結構：

• obj.prepareRandomFunction() 將this 設為obj（答案中的規則#2）。
• randomFunction(this.sumData.bind(this))將 this.sumData.bind(this) 作為參數傳遞（規則 #1）。
• 在 randomFunction 中，callback(data) 設定 this到全域物件（規則#1）。

但是，在 randomFunction 呼叫回呼之前，它使用 this.sumData.bind(this) 建立一個新函數（規則#5）。這個新函數呼叫原始回呼函數，但現在將 this 綁定到 obj（傳遞給 bind 的參數）。

回調函數的意義

傳遞方法時作為回調，了解它不會被稱為 obj.method() 至關重要。這意味著 this 在回呼函數中不會有正確的值。若要解決此問題，您可以使用 bind() 在回呼中設定 this 的值。

其他有用註釋

• 中的規則#6答案描述了ES6 箭頭函數如何維護this 的當前詞法值，即使在回調函數中也是如此。
• .apply() 和 .call() 可用於建立新的具有特定 this 值的函數呼叫。
• bind() 可用於建立新函數，該函數使用自訂的 this 值呼叫原始函數。
• 了解 this 的複雜本質至關重要用於有效的 JavaScript 編碼和掌握回呼等概念。