為什麼 JavaScript 中的「this」與其他 OOP 語言不同

JavaScript 的 this 關鍵字經常會造成混亂，特別是對於來自 C#、Java 或 Python 等語言的開發人員來說，其中 self 總是指涉目前物件實例。 與這些語言不同，JavaScript 的 this 是動態的，其值由函數的呼叫上下文決定。本指南總結了影響 this 行為的各種場景。

1。全球範圍：

• 非嚴格模式： this 指向全域物件（瀏覽器中為 window，Node.js 中為 global）。

<code class="language-javascript">console.log(this); // window or global</code>

• 嚴格模式： this 是 undefined。

<code class="language-javascript">"use strict";
console.log(this); // undefined</code>

2。內部函數：

• 常規函數：非嚴格模式下，this指的是全域物件；在嚴格模式下，它是undefined。

<code class="language-javascript">function myFunc() {
  console.log(this); 
}
myFunc(); // window (non-strict), undefined (strict)</code>

3。物件方法：

• 當函數作為物件方法呼叫時，this 引用該物件。

<code class="language-javascript">const myObj = {
  name: "JavaScript",
  greet() {
    console.log(this.name); // this refers to myObj
  }
};
myObj.greet(); // Output: JavaScript</code>

4。箭頭功能：

• 箭頭函數缺少自己的this。它們從詞法範圍（周圍上下文）繼承 this。

<code class="language-javascript">const myObj = {
  name: "JavaScript",
  arrowFunc: () => {
    console.log(this.name); // Inherits this from the global scope
  }
};
myObj.arrowFunc(); // undefined (in browsers, this is window)</code>

5。建構子：

• 在建構子或類別中，this 指的是新建立的實例。

<code class="language-javascript">class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, ${this.name}`);
  }
}

const person = new Person("Alice");
person.greet(); // Output: Hello, Alice</code>

6。明確綁定（call、apply、bind）：

JavaScript 函數是具有方法 (call、apply、bind) 的對象，用於明確設定 this.

• call 和 apply 使用指定的 this 值呼叫函數。 call 使用逗號分隔的參數； apply 接受一個陣列。

<code class="language-javascript">function greet(greeting) {
  console.log(`${greeting}, ${this.name}`);
}

const user = { name: "Alice" };
greet.call(user, "Hello"); // Output: Hello, Alice
greet.apply(user, ["Hi"]); // Output: Hi, Alice</code>

• bind 傳回一個與 this 永久綁定的新函數。

<code class="language-javascript">const boundGreet = greet.bind(user);
boundGreet("Hello"); // Output: Hello, Alice</code>

7。事件監聽器：

• 常規函數： this 指觸發事件的元素。

<code class="language-javascript">const btn = document.querySelector("button");
btn.addEventListener("click", function() {
  console.log(this); // The button element
});</code>

• 箭頭函數： this 繼承自周圍範圍，而不是元素。

<code class="language-javascript">btn.addEventListener("click", () => {
  console.log(this); // this depends on the arrow function's definition context
});</code>

8。 setTimeout / setInterval:

• 常規函數： this 預設為全域物件。

<code class="language-javascript">setTimeout(function() {
  console.log(this); // window in browsers
}, 1000);</code>

• 箭頭函數： this 依詞法繼承。

<code class="language-javascript">setTimeout(() => {
  console.log(this); // Inherits this from surrounding context
}, 1000);</code>

9。班級：

• 在類別方法中，this 指的是類別實例。

<code class="language-javascript">console.log(this); // window or global</code>

10。上下文遺失（方法擷取）：

將方法分配給變數或將其作為回調傳遞可能會導致this綁定丟失。

<code class="language-javascript">"use strict";
console.log(this); // undefined</code>

解決方案：使用.bind(obj)或箭頭函數來維護上下文。

11。 new 關鍵字：

將 new 與函數一起使用會建立一個新對象，並且 this 引用該對象。

<code class="language-javascript">function myFunc() {
  console.log(this); 
}
myFunc(); // window (non-strict), undefined (strict)</code>

總表：

上下文

Context	this Refers To
Global (non-strict)	Global object (window/global)
Global (strict)	undefined
Object Method	The object owning the method
Arrow Function	Lexical scope (surrounding context)
Constructor/Class	The instance being created
call, apply, bind	Explicitly defined value
Event Listener	The element triggering the event
setTimeout/setInterval	Global object (regular function), lexical scope (arrow function)
new Keyword	The newly created object

指的是 標題> 全域（非嚴格） 全域物件（視窗/全域） 全域（嚴格） 未定義 物件方法 擁有該方法的物件 箭頭函數 詞法範圍（周圍上下文） 建構子/類別 正在建立的實例 呼叫、應用、綁定 明確定義的值 事件監聽器 觸發事件的元素 setTimeout/setInterval 全域物件（常規函數）、詞法作用域（箭頭函數）

關鍵字

新建立的物件 表> this理解這些場景對於編寫正確且可預測的 JavaScript 程式碼至關重要。 請記住在必要時使用顯式綁定等技術以避免意外的行為。

以上是為什麼 JavaScript 中的「this」與其他 OOP 語言不同的詳細內容。更多資訊請關注PHP中文網其他相關文章！