js中this的作用 js中this的三种用法

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

在JavaScript中，这个指向是很多人刚开始学习时容易混淆的地方。它的值不是固定不动的，而是根据函数被调用的方式决定动态的。理解这一点，对写出稳定、可维护的代码非常重要。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 了。 箭头函数的this怎么算？

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

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

比如：const obj = { name： 'Jerry'， sayName： () =gt； { console.log(this.name)； // 这里的this全局对象}}；obj.sayName()； // 输出 undefined 或 window.name登录后复制

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

所以如果你希望这个能绑定到当前对象，不要使用箭头函数作为对象的方法。3. 如何手动控制this的指向？

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

它们的区别在于传参方式和调用时机：call(obj， arg1， arg2)：立即调用函数，参数依次调用。apply(obj， [arg1， arg2])：立即调用，参数以队列形式形成。bind(obj， arg1， arg2)：返回一个新函数，之后再调用。

例如：functiongreet(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的指向。 常见的坑：事件监听与操作回调中的这个

在DOM事件监听或异步中，这个很容易丢失预期的指向。

比如：const button = document.querySelector('#btn')；button.addEventListener('click'， obj.sayName)；//此时按钮点击输出undefined，因为this指向按钮元素登录后复制

解决方法通常是用bind提前绑定上下文，或者用闭包保存this：button.addEventListener('click'， obj.sayName.bind(obj))；登录后复制

或者用箭头函数转发：button.addEventListener('click'， () =gt； obj.sayName())；登录后复制

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

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

以上就是JS中的this指向什么？怎么控制？的详细内容，更多请关注乐哥常识网其他文章！