在 Javascript 中，為什麼「this」運算子不一致？

在 JavaScript 中，「this」運算子表現出不同的行為，取決於呼叫上下文。這可能會導致混亂和意外結果，特別是在使用回調和物件時。

呼叫模式與「this」綁定

「this」運算子綁定到函數呼叫期間的物件或類別，此綁定由呼叫模式決定：

• 方法： 當呼叫時物件的方法，「this」指物件本身。
• 函數： 當作為獨立函數呼叫時，「this」會引用全域範圍（瀏覽器中的視窗物件）。
• 建構子： 當使用「new」關鍵字呼叫時，會建立一個新對象，「this」指向該物件object.
• Apply: “apply”方法允許明確設定“this”並在陣列中傳遞參數。

The回調難題

當方法的回呼作為函數呼叫時，就會出現問題。由於回呼不是作為方法呼叫的，因此「this」指的是全域範圍，而不是它原本打算的物件。

最佳實踐

維護的一個策略回調中「this」綁定的一致性是使用「var that = this;」圖案。這將對「this」（物件）的引用分配給一個新變數（that），然後可以在回調中使用該變數。

另一個推薦的方法是擁抱 JavaScript 的函數式程式設計方面並避免依賴類別和繼承模式。透過使用純函數和高階函數，您可以將邏輯與物件狀態分離，並實現更模組化且可預測的程式碼。

此外，考慮使用 JavaScript 框架，該框架提供了處理「this」綁定和物件的機制。以一致的方式進行面向程式設計。請記得仔細查看框架的文檔和怪癖，以避免意外行為。