DEV Community
·
"this" 不是你想的那样：JavaScript this 关键字的实用指南
💡
原文英文，约700词，阅读约需3分钟。
📝
内容提要
在JavaScript中，this关键字的值取决于函数的调用方式而非定义位置。本文通过实例解析了this在对象、事件处理器和类中的用法及常见错误，并提供了解决方案，帮助开发者避免undefined错误。理解this是JavaScript开发者的重要一步。
🎯
关键要点
- this关键字的值取决于函数的调用方式，而非定义位置。
- 在对象中，this指向调用该方法的对象。
- 如果将方法存储在变量中并单独调用，this可能会变为undefined。
- 解决方案是使用.bind(this)来绑定this。
- 在事件处理器中，this指向触发事件的元素。
- 使用箭头函数时，this会继承自外部作用域，可能导致undefined。
- 解决方案是使用常规函数或在箭头函数中显式引用事件目标。
- 在类中，this指向类的特定实例。
- 使用setTimeout时，this可能会丢失，导致undefined。
- 解决方案是使用.bind(this)或箭头函数。
- 理解this是JavaScript开发者的重要一步，避免常见错误。
❓
延伸问答
JavaScript中的this关键字是如何工作的？
this的值取决于函数的调用方式，而非定义位置。
在对象方法中，this指向什么？
在对象方法中，this指向调用该方法的对象。
如何解决this在事件处理器中为undefined的问题？
可以使用常规函数或在箭头函数中显式引用事件目标来解决。
在类中，this指向什么？
在类中，this指向类的特定实例。
为什么setTimeout中的this会变为undefined？
因为setTimeout在不同的上下文中执行，this不再绑定到原来的对象。
如何在JavaScript中正确使用this？
在对象中，this指向对象；在类中，this指向实例；在常规函数中，this取决于调用方式；在箭头函数中，this继承自外部作用域。
🏷️
标签
➡️
