JS中this到底是什么？手把手教你玩转this指向

掌握JavaScript中`this`的指向是提升代码稳定性和可维护性的关键。本文深入解析`this`的动态特性，揭示其并非固定不变，而是由函数调用方式决定的。文章首先阐述了普通函数、箭头函数中`this`的默认指向，包括全局对象、对象方法调用和`new`关键字创建实例等情况。随后，详细讲解了`call`、`apply`和`bind`三种手动绑定`this`的方法，并通过实例展示了它们在参数传递和调用时机上的差异。最后，针对常见的事件监听和回调函数中`this`指向问题，提供了使用`bind`或箭头函数包裹的解决方案。通过学习本文，你将能够彻底理解并掌控`this`，避免在JavaScript开发中常见的`this`指向错误。

this的指向取决于函数调用方式。1. 默认情况下，普通函数的this指向全局对象（如浏览器中为window），若作为对象方法调用则指向该对象，若通过new调用则指向新对象实例；2. 箭头函数无自身this，继承外层作用域的this；3. 可使用call、apply或bind手动绑定this，其中call和apply立即调用函数并分别以参数列表和数组传参，bind返回一个绑定后的新函数；4. 常见问题出现在事件监听或回调中，可通过bind或箭头函数包裹来保持this指向预期对象。掌握这些规则可有效避免this带来的混淆与错误。

在JavaScript中，this的指向是很多人刚开始学习时容易混淆的地方。它的值不是固定不变的，而是根据函数被调用的方式动态决定的。理解这一点，对写出稳定、可维护的代码非常重要。

1. this默认指向谁？

函数中的this指向取决于它被如何调用，而不是在哪里定义的。

• 在普通函数中（非箭头函数），this默认指向全局对象，在浏览器中就是window。
• 如果函数是在某个对象的方法中被调用的，那么this就会指向那个对象。
• 如果函数作为构造函数通过new调用，this会指向新创建的对象实例。

举个例子：

const obj = {
  name: 'Tom',
  sayName: function() {
    console.log(this.name);
  }
};

obj.sayName(); // 输出 'Tom'，this指向obj

但如果把方法单独拿出来调用：

const func = obj.sayName;
func(); // 输出 undefined 或者 window.name（如果存在）

这时候this就不再指向obj了。

2. 箭头函数的this怎么算？

箭头函数没有自己的this，它会捕获外层作用域的this值。

也就是说，箭头函数内部的this其实是它外层普通函数或全局作用域的this。

比如：

const obj = {
  name: 'Jerry',
  sayName: () => {
    console.log(this.name); // 这里的 this 指向全局对象
  }
};

obj.sayName(); // 输出 undefined 或 window.name

即使sayName是obj的一个属性，由于它是箭头函数，this仍然不会指向obj。

所以如果你希望this能绑定到当前对象，尽量不要使用箭头函数作为对象的方法。

3. 如何手动控制this的指向？

JS提供了三种方法可以显式指定函数执行时的this：

• call
• apply
• bind

它们的区别在于传参方式和调用时机：

• call(obj, arg1, arg2)：立即调用函数，参数依次传递。
• apply(obj, [arg1, arg2])：立即调用，参数以数组形式传入。
• bind(obj, arg1, arg2)：返回一个新函数，之后再调用。

例如：

function greet(greeting, punctuation) {
  console.log(`${greeting}, ${this.name}${punctuation}`);
}

const person = { name: 'Alice' };

greet.call(person, 'Hello', '!'); // Hello, Alice!
greet.apply(person, ['Hi', '.']); // Hi, Alice.
const sayHello = greet.bind(person, 'Hey');
sayHello('!!!'); // Hey, Alice!!!

这些方法常用于回调函数、事件处理等场景中，用来“锁定”this的指向。

4. 常见的坑：事件监听与回调中的this

在DOM事件监听或异步操作中，this容易丢失预期的指向。

比如：

const button = document.querySelector('#btn');
button.addEventListener('click', obj.sayName);
// 此时点击按钮输出 undefined，因为 this 指向 button 元素

解决办法通常是用bind提前绑定上下文，或者用闭包保存this：

button.addEventListener('click', obj.sayName.bind(obj));

或者用箭头函数包裹：

button.addEventListener('click', () => obj.sayName());

不过要注意，这种方式其实是在调用函数，而不是绑定函数本身。

基本上就这些。
this看起来简单，但稍不注意就容易出错。关键在于记住一句话：函数怎么调用决定了this是谁。掌握不同调用方式下的规则，并学会用call/apply/bind来控制，就能避免很多问题。

终于介绍完啦！小伙伴们，这篇关于《JS中this到底是什么？手把手教你玩转this指向》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！