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