值得一看
双11 12
广告
广告

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

温馨提示: 本文最后更新于2025-06-06 22:42:29,某些文章具有时效性,若有错误或已失效,请在下方留言或联系易赚网
文章版权声明 1 本网站名称: 创客网
2 本站永久网址:https://new.ie310.com
1 本文采用非商业性使用-相同方式共享 4.0 国际许可协议[CC BY-NC-SA]进行授权
2 本站所有内容仅供参考,分享出来是为了可以给大家提供新的思路。
3 互联网转载资源会有一些其他联系方式,请大家不要盲目相信,被骗本站概不负责!
4 本网站只做项目揭秘,无法一对一教学指导,每篇文章内都含项目全套的教程讲解,请仔细阅读。
5 本站分享的所有平台仅供展示,本站不对平台真实性负责,站长建议大家自己根据项目关键词自己选择平台。
6 因为文章发布时间和您阅读文章时间存在时间差,所以有些项目红利期可能已经过了,能不能赚钱需要自己判断。
7 本网站仅做资源分享,不做任何收益保障,创业公司上收费几百上千的项目我免费分享出来的,希望大家可以认真学习。
8 本站所有资料均来自互联网公开分享,并不代表本站立场,如不慎侵犯到您的版权利益,请联系79283999@qq.com删除。

本站资料仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负!
THE END
喜欢就支持一下吧
点赞13 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容