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中文网其他相关文章！
