JavaScript 中的 this 關鍵字可能會令人困惑，因為它在常規函數和箭頭函數中的行為不同。在這篇文章中，我們將解釋這在兩種類型的函數中是如何運作的，探討為什麼存在這些差異，並提供在 JavaScript 中理解這一點所需的基本知識。
常規功能
JavaScript 中的常規函數是使用 function 關鍵字定義的。這些函數中 this 的值取決於函數的呼叫方式。以下是幾個例子：
1. 全球背景
function regularFunction() {
console.log(this);
}
regularFunction(); // Logs the global object (window in browsers)
登入後複製
'use strict';
function regularFunction() {
console.log(this);
}
regularFunction(); // Logs undefined
登入後複製
-
說明： 在嚴格模式下，當在全域上下文中呼叫函數時，this 會保持未定義狀態，透過防止意外修改全域物件來提供更安全的環境。
2. 方法調用
當函數作為物件的方法被呼叫時，this 引用該物件。
const obj = {
method: function() {
console.log(this);
}
};
obj.method(); // Logs obj
登入後複製
3. 構造函數調用
當函數用作建構函式（使用 new 關鍵字呼叫）時，this 指的是新建立的實例。
function Person(name) {
this.name = name;
this.sayHello = function() {
console.log(`Hello, my name is ${this.name}`);
};
}
const person1 = new Person('Alice');
person1.sayHello(); // Logs "Hello, my name is Alice"
const person2 = new Person('Bob');
person2.sayHello(); // Logs "Hello, my name is Bob"
登入後複製
4. 顯式綁定
您可以使用call、apply 或bind 明確綁定它。
function regularFunction() {
console.log(this);
}
const obj = { value: 42 };
regularFunction.call(obj); // Logs obj
regularFunction.apply(obj); // Logs obj
const boundFunction = regularFunction.bind(obj);
boundFunction(); // Logs obj
登入後複製
箭頭功能
ES6 中引入的箭頭函數沒有自己的 this 上下文。相反，它們從周圍的（詞彙）範圍繼承這一點。這使得箭頭函數在某些情況下很有用。
1. 詞法 this
箭頭函數從定義它們的作用域繼承它。
const arrowFunction = () => {
console.log(this);
};
arrowFunction(); // Logs the global object (window in browsers)
登入後複製
'use strict';
const arrowFunction = () => {
console.log(this);
};
arrowFunction(); // Logs undefined
登入後複製
-
說明： 在嚴格模式下，如果周圍作用域是全域的，則它保持未定義狀態，因為從周圍作用域繼承。
2. 方法調用
與常規函數不同，箭頭函數在作為方法呼叫時不會獲得自己的 this。他們從封閉範圍繼承了這一點。
const obj = {
method: () => {
console.log(this);
}
};
obj.method(); // Logs the global object (window in browsers) or undefined in strict mode
登入後複製
3.另一個函數內的箭頭函數
當箭頭函數在另一個函數內部定義時，它會從外部函數繼承 this 。
function outerFunction() {
const arrowFunction = () => {
console.log(this);
};
arrowFunction();
}
const obj = { value: 42, outerFunction: outerFunction };
obj.outerFunction(); // Logs obj, because `this` in arrowFunction is inherited from outerFunction
登入後複製
4. 事件處理程序中的箭頭函數
事件處理程序中的箭頭函數從周圍的詞法範圍繼承此屬性，而不是從觸發事件的元素繼承。
const button = document.querySelector('button');
button.addEventListener('click', () => {
console.log(this);
}); // Logs the global object (window in browsers) or undefined in strict mode
登入後複製
Why These Differences?
The difference between regular functions and arrow functions lies in how they handle this:
-
Regular Functions: The value of this is dynamic and determined by the call-site (how the function is called).
-
Arrow Functions: The value of this is lexical and set at the time the function is defined, based on the this value of the enclosing execution context.
Key Concepts to Understand
To understand the behavior of this in JavaScript, you need to know the following concepts:
-
Execution Context: The context in which code is executed, affecting how this is determined.
-
Call-site: The location in code where a function is called, influencing the value of this in regular functions.
-
Lexical Scoping: How this is inherited in arrow functions from the surrounding scope.
-
Strict Mode: How strict mode changes the default behavior of this in certain contexts.
Summary
-
Regular Functions: this is dynamic and determined by the call-site.
-
Arrow Functions: this is lexical and determined by the surrounding scope when the function is defined.
Understanding these distinctions will help you write more predictable and maintainable JavaScript code. Whether you're using regular functions or arrow functions, knowing how this works is crucial for effective JavaScript development.
以上是為什麼「this」關鍵字在常規函數和箭頭函數中的行為不同的詳細內容。更多資訊請關注PHP中文網其他相關文章！
