深入探討 JavaScript 中的 new 和 this：釋放物件導向程式設計的力量

JavaScript 是一種強大、靈活的語言，根植於函數式程式設計和物件導向程式設計 (OOP) 的功能。 JavaScript 中 OOP 的核心有兩個關鍵概念：new 和 this。雖然這些關鍵字看起來很簡單，但它們之間存在細微差別，即使對於經驗豐富的開發人員來說也很難掌握。在這篇文章中，我們將深入探討 JavaScript 中 new 和 this 的工作原理，透過範例和最佳實踐分解它們的行為。

目錄

JavaScript 中的 this 簡介

從本質上講，這是一個上下文相關的關鍵字，它引用呼叫函數的物件。與其他一些靜態綁定 this 的語言不同，在 JavaScript 中，this 的值可以根據呼叫函數的方式和位置而改變。

簡單來說：

• 全域範圍：在全域上下文（或非嚴格模式）下，this 指的是全域物件（瀏覽器中的窗口，Node.js 中的全域）。
• 內部方法：在物件方法中，this 指的是擁有此方法的物件。
• 事件處理程序：在事件偵聽器中，這通常指觸發事件的元素。

我們將在部落格後面透過範例探索這些上下文。

理解 JavaScript 中的 new

JavaScript 中的 new 關鍵字用於建立使用者定義物件或內建物件（例如日期、陣列等）的實例。當您將 new 與建構函數一起使用時，它會建立一個新物件並將 this 綁定到該對象，本質上將其連結到原型。

例如：

function Car(make, model) {
  this.make = make;
  this.model = model;
}

const myCar = new Car("Tesla", "Model 3");
console.log(myCar); // { make: 'Tesla', model: 'Model 3' }

使用新的時：

1. 建立了一個新的空物件。
2. 建構函式中的 this 關鍵字被設定為引用這個新物件。
3. 函數執行其程式碼並為其指派屬性。
4. 該物件連結到建構子的原型，從而實現繼承。
5. 除非明確傳回對象，否則函數將傳回 this。

new 的幕後工作原理

讓我們使用自訂函數來模擬 new 的行為：

function simulateNew(constructor, ...args) {
  const obj = {}; // Step 1: Create a new empty object
  Object.setPrototypeOf(obj, constructor.prototype); // Step 2: Link the object to the constructor's prototype
  const result = constructor.apply(obj, args); // Step 3: Bind this and execute the constructor
  return result instanceof Object ? result : obj; // Step 4: Return the object
}

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

const john = simulateNew(Person, "John Doe");
console.log(john.name); // John Doe

此函數遵循與 new 關鍵字相同的步驟，示範了幕後機制。

各種情況的例子

1. 全球背景

在全域上下文（非嚴格模式）中，this 指的是全域物件（瀏覽器中的視窗）。

console.log(this === window); // true

function showThis() {
  console.log(this); // window
}

showThis();

在嚴格模式下（'use strict';），這在全域上下文中未定義：

function Car(make, model) {
  this.make = make;
  this.model = model;
}

const myCar = new Car("Tesla", "Model 3");
console.log(myCar); // { make: 'Tesla', model: 'Model 3' }

1. 物件方法上下文

當在物件方法中使用 this 時，它指的是擁有該方法的物件。

function simulateNew(constructor, ...args) {
  const obj = {}; // Step 1: Create a new empty object
  Object.setPrototypeOf(obj, constructor.prototype); // Step 2: Link the object to the constructor's prototype
  const result = constructor.apply(obj, args); // Step 3: Bind this and execute the constructor
  return result instanceof Object ? result : obj; // Step 4: Return the object
}

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

const john = simulateNew(Person, "John Doe");
console.log(john.name); // John Doe

這裡，this 指的是 person 對象，因為它是呼叫greet 方法的上下文。

1. 建構子上下文

在建構子中，this 指的是新建立的物件。

console.log(this === window); // true

function showThis() {
  console.log(this); // window
}

showThis();

1. 事件處理程序上下文 在事件處理程序中，這是指觸發事件的 DOM 元素。

"use strict";

function showThis() {
  console.log(this); // undefined
}

showThis();

在事件監聽器中使用箭頭函數時，this 是詞法綁定的並且不引用元素：

const person = {
  name: "Alice",
  greet() {
    console.log(this.name); // 'Alice'
  },
};

person.greet();

最佳實踐和常見陷阱

1. 箭頭函數和this：箭頭函數不會綁定自己的this；相反，它們從周圍的詞彙上下文繼承了這一點。這在您想要維護對父作用域的參考的事件處理程序或回調等情況下非常有用。

function Animal(type) {
  this.type = type;
}

const dog = new Animal("Dog");
console.log(dog.type); // Dog

1. 使用 .call()、.apply() 和 .bind() 進行明確綁定：您可以使用這些方法手動控制 this 的值。例如：

const button = document.querySelector("button");

button.addEventListener("click", function () {
  console.log(this); // the button element
});

1. 避免在全域函數中使用它：在全域函數中避免使用它通常是一個很好的做法，因為它可能會導致意外的行為，尤其是在嚴格模式下。

2. 類別語法：從 ES6 開始，使用類別語法提供了一種更直觀的方法來使用 this 和 new 定義建構子。
   

button.addEventListener("click", () => {
  console.log(this); // refers to the outer scope (e.g., window)
});

結論

new 和 this 關鍵字在 JavaScript 的物件導向範例中發揮關鍵作用，允許建立和管理物件及其行為。了解它在不同上下文中的工作原理以及 new 如何建構物件實例對於編寫健全、可擴展的 JavaScript 程式碼至關重要。透過掌握這些概念，您可以避免常見的陷阱並編寫更清晰、更易於維護的程式碼。

不斷實驗和編寫範例，以鞏固您對這些核心 JavaScript 概念的理解！

喜歡閱讀嗎？如果您發現這篇文章富有洞察力或有幫助，請考慮為我買杯咖啡來支持我的工作。您的貢獻有助於推動更多此類內容。點擊此處請我喝杯虛擬咖啡。乾杯！

以上是深入探討 JavaScript 中的 new 和 this：釋放物件導向程式設計的力量的詳細內容。更多資訊請關注PHP中文網其他相關文章！