JS中的this指向什么?怎么控制?

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

JS中的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来控制,就能避免很多问题。

© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享