javascipt中this的指向问题记录

一、前言

前端中this的指向一直是令人比较头疼的问题。由于没有弄懂this的指向，导致在学习框架总会出现undefined错误，这次借这个机会梳理一下。

二、this指向的几种情况

• 在全局作用域中
• 在函数中
• 在方法中
• 在箭头函数中
• 在事件处理函数中

三、在全局作用域中

注意：在不同执行环境下的全局作用于中this指向是不一样的，这取决于开发者是如何绑定的。在浏览器执行环境中，this表示Window对象；在node执行环境中，this表示{}；在react框架中，this表示undifined。

四、在函数中

在函数中，如果没有修改指向，this指向与全局作用域的this指向保持一致。

五、在方法中

在方法中，如果没有修改指向，this指向调用者，谁调用就指向谁。

六、在箭头函数中

在箭头函数中，this指向与上一层this保持一致。与上述在函数中的this比较，显然成立。箭头函数常用于方法内部的回调函数中，使this指向与方法内部的this指向保持一致，指向调用方法的对象。

七、在事件处理函数中

在事件处理函数中，如果是内嵌函数绑定，那么this指向与在函数中this指向保持一致；如果是内嵌方法调用绑定，那么this指向与在方法中this指向保持一致；如果是element.onEvent=function(){}和element.addEventListener(“event”, function(){})绑定，那么this指向触发事件的元素。