悠悠楠杉
网站页面
一篇文章详细讲解JavaScript中的this(普通函数、箭头函数、 函数运用)
06/05
1. 普通函数中的this
在全局环境中或直接调用的普通函数中，this通常指向全局对象（在浏览器中是window）。但在严格模式（strict mode）下，全局this是undefined。此外，当函数作为对象的方法被调用时，this指向该对象。
示例：
```javascript
function showThis() {
console.log(this); // 在全局环境中输出 window 对象（或 undefined 在严格模式下）
}
showThis(); // 调用时，this 指向全局对象或 undefined（取决于是否为严格模式）
const obj = {
value: 2023,
showValue: function() {
console.log(this.value); // this 指向 obj，输出 2023
}
};
obj.showValue(); // 作为对象方法调用，this 指向 obj
```
2. 箭头函数中的this
箭头函数不绑定自己的this，而是捕获其所在上下文的this值，并将其作为自己的this值。这意味着在箭头函数中，this的指向取决于其外围作用域的上下文。这简化了回调函数和闭包中关于this的常见问题。
示例：
javascript
const obj = {
value: 2023,
showValue: () => { console.log(this.value); }, // 箭头函数不绑定自己的 this，继承外围作用域的 this
};
obj.showValue(); // 输出 2023，因为箭头函数内的 this 继承自 obj 的 this 上下文
3. 控制或明确this的绑定方式
- 显式绑定（
.bind()）：可以提前指定函数的执行上下文。例如，fn.bind(obj)会将fn的this永久绑定到obj上。
示例：javascript const obj = { value: 2023 }; const fn = function() { console.log(this.value); }.bind(obj); fn(); // 输出 2023 - 新对象（使用new）：当使用new操作符调用函数时，创建了一个新的对象实例，其this被绑定到该新对象上。
示例：javascript function Person(name) { this.name = name; // 使用 new 时，this 指向新创建的 Person 实例 } const person = new Person('Alice'); // person 是 Person 的一个新实例，其 this 指向 person console.log(person.name); // 输出 "Alice" - 隐式绑定和默认值：如果调用时没有显式绑定且不是作为构造函数调用，则使用隐式绑定规则；如果都没有匹配到上下文，则使用全局对象（或在严格模式下是undefined）。但通常不推荐依赖于隐式绑定。
