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：
callapplybind
它们的区别在于传参方式和调用时机：
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指向什么？怎么控制？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1505538.html
微信扫一扫 
支付宝扫一扫 
