了解 JavaScript 中的「this」關鍵字：完整指南

JavaScript 中的 this 關鍵字是該語言中最強大但經常被誤解的方面之一。它的值取決於函數的呼叫方式而不是函數的定義位置，這對於管理程式碼中的上下文至關重要。

在本指南中，我們將透過實際範例探討其細微差別，並深入探討如何使用呼叫、應用和綁定來明確控制它。

這的基礎知識

在 JavaScript 中，this 指的是目前正在執行程式碼的物件。確定其值的規則取決於函數的呼叫類型：

1. 隱式綁定：這是方法呼叫之前的物件。
2. 明確綁定：可以使用呼叫、應用或綁定明確設定。
3. new Binding：在建構子中，this 指的是新建立的物件。
4. 全域/視窗綁定：如果上述規則都不適用，則預設為全域物件（瀏覽器中的視窗或 Node.js 中的全域）。

1. 隱式綁定：來自呼叫者的上下文

當函數作為物件的方法呼叫時，this 指的是點之前的物件。

const car = {
  model: "Tesla",
  displayModel: function () {
    console.log(this.model);
  }
};

car.displayModel(); // Output: "Tesla"

在此範例中，this.model 指向 car 物件的 model 屬性，因為 car 是呼叫者。

2. 明確綁定：使用call、apply、bind

當你需要精確控制this的值時，可以使用call、apply或bind。

一個。稱呼

call 方法立即使用指定的 this 值和單獨的參數呼叫函數。

function greet(greeting, punctuation) {
  console.log(`${greeting}, ${this.name}${punctuation}`);
}

const person = { name: "Jack" };

greet.call(person, "Hello", "!"); // Output: "Hello, Jack!"

這裡，呼叫確保 this.name 引用 person 物件的 name 屬性。

b.申請

apply 方法與 call 類似，但將參數作為陣列而不是單獨接收。

greet.apply(person, ["Hi", "."]); // Output: "Hi, Jack."

當您要傳遞一組參數時，這使得 apply 特別有用。

c.綁定

bind 方法傳回一個新函數，並將 this 永久設定為指定對象，從而允許延遲呼叫。

const boundGreet = greet.bind(person, "Welcome");
boundGreet("?"); // Output: "Welcome, Jack?"

透過綁定，您可以建立一個與特定上下文綁定的可重複使用函數。

3. new Binding：用建構子建立對象

當使用 new 關鍵字呼叫函數時，this 指的是正在建立的新物件。

function Person(name) {
  this.name = name;
}

const jack = new Person("Jack");
console.log(jack.name); // Output: "Jack"

new 運算子將其設定為新建立的對象，讓您定義可重複使用的物件藍圖。

4. 全域/視窗綁定：後備

如果以上規則都不適用，則預設為全域物件。但是，在嚴格模式（“使用嚴格”）下，在這種情況下這是未定義的。

const car = {
  model: "Tesla",
  displayModel: function () {
    console.log(this.model);
  }
};

car.displayModel(); // Output: "Tesla"

謹慎對待全域綁定，因為它可能會導致意外行為。

呼叫、應用和綁定總結

這是一個快速比較：

結論

掌握 this 關鍵字對於編寫乾淨的、上下文感知的 JavaScript 程式碼至關重要。透過了解隱式、顯式、新的和全域綁定，您可以自信地跨各種場景進行管理。呼叫、應用和綁定等工具提供精細控制，使您的函數靈活且可重複使用。

追蹤我：Github Linkedin

以上是了解 JavaScript 中的「this」關鍵字：完整指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！