this，作為 JavaScript 中最令人困惑的概念之一，常常讓開發者頭疼不已。不同的調用方式、不同的上下文環境，都會導致 this 指向不同的對象。掌握 this 的指向，是理解 JavaScript 核心機制的關鍵，也是成為一名合格的 JavaScript 工程師的必備技能。本文將一次性講清楚 JavaScript 的 this 指向，讓你徹底擺脫 this 的困擾！

一、this 是什么？

簡單來說，this 是一個關鍵字，它指向的是函數執行時的上下文對象。也就是說，this 的值取決于函數是如何被調用的，而不是函數在哪里定義的。

二、this 的四種綁定規則

JavaScript 中 this 的指向主要由以下四種綁定規則決定：

1. 默認綁定 (Default Binding)

示例：

function foo() {
  console.log(this);
}

foo(); // 非嚴格模式下，輸出 window (瀏覽器) 或 global (Node.js)
       // 嚴格模式下，輸出 undefined

"use strict";
function bar() {
  console.log(this);
}

bar(); // 輸出 undefined

• 在非嚴格模式下，如果函數是獨立調用（即沒有明確的調用者），this 指向全局對象 (瀏覽器中是 window，Node.js 中是 global)。
• 在嚴格模式下，this 指向 undefined。

2. 隱式綁定 (Implicit Binding)

示例：

如果函數作為對象的方法調用，this 指向調用該方法的對象。

3. 顯式綁定 (Explicit Binding)

示例：

• 可以使用 call()、apply() 或 bind() 方法來顯式地指定 this 的指向。
• call() 和 apply() 方法會立即執行函數，并將 this 綁定到指定的對象。它們的區別在于，call() 方法接收一個參數列表，而 apply() 方法接收一個參數數組。
• bind() 方法會創建一個新的函數，并將 this 永久綁定到指定的對象。新函數不會立即執行，需要手動調用。

4. new 綁定 (new Binding)

示例：

當使用 new 關鍵字調用函數時，會發生以下步驟：

• 創建一個新的空對象。
• 將新對象的原型指向構造函數的 prototype 屬性。
• 將構造函數的 this 綁定到新對象。
• 執行構造函數中的代碼。
• 如果構造函數沒有顯式返回一個對象，則返回新對象。

5. 優先級

當多個綁定規則同時適用時，this 的指向由優先級最高的規則決定。優先級從高到低依次為：

• new 綁定
• 顯式綁定
• 隱式綁定
• 默認綁定

6. 特殊情況

(1) 箭頭函數： 箭頭函數沒有自己的 this，它會從定義時所在的上下文中繼承 this。箭頭函數的 this 無法通過 call()、apply() 或 bind() 方法修改。

示例：

(2) DOM 事件處理函數： 在 DOM 事件處理函數中，this 通常指向觸發事件的 DOM 元素。但可以使用 addEventListener() 方法的 bind() 方法來修改 this 的指向。

示例：

<button id="myButton">Click me</button>

<script>
  const button = document.getElementById("myButton");

  button.addEventListener("click", function() {
    console.log(this); // 輸出: <button id="myButton">Click me</button>
  });

  const obj = {
    name: "MyObject"
  };

  button.addEventListener("click", function() {
    console.log(this.name);
  }.bind(obj)); // 輸出: MyObject
</script>