JavaScript中this指向问题怎么理解

这篇文章主要介绍“JavaScript中this指向问题怎么理解”，在日常操作中，相信很多人在JavaScript中this指向问题怎么理解问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”JavaScript中this指向问题怎么理解”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！通过理解上下文，我们可以更加清晰的明白this的指向问题this的指向可以看成就是当前的上下文先让我们通过一个例子来看看什么是函数中的this：第一个输出的是绿色和蓝色，此时函数的上下文是 colors，所以this指向 colors
第二个输出的是 undefined 和 undefined，此时直接用圆括号调用函数，上下文就是 window，此时this指向的是 window所以，我们可以看出函数的上下文也就是this是由调用函数的方式决定。常见的函数上下文情况：对象打点调用它的方法函数，免费云主机、域名则函数上下文是这个打点的对象，this指向这个对象
obj.fun(); 上下文就是 obj直接用圆括号调用函数，上下文就是 window 对象，this指向 window 对象举个例子：
在 obj 里面的 b 这里的 fun() 是直接用圆括号调用的，所以此时的 fun() 上下文就是 window 对象，所以这里的this指向 window，b = 1 + 2 = 3；
obj.fun() 的 fun() 是由 obj 打点调用的，所以它的上下文就是 obj，所以这里的this指向 obj，所以 res = 5 + 3 = 8数组 / 类数组对象枚举出函数进行调用，上下文是这个数组 / 类数组对象
即可以看成：让我们通过例子来理解一下：
这里下标为 3 是个函数，通过数组枚举出来下标为 3 的对象，然后再执行，所以它的上下文就是这个数组 arr类数组对象：什么是类数组对象 ？所有键名为自然数序列（从 0 开始），且有length属性的对象
例如：arguments对象就是一个类数组对象，它是函数的实参列表这里 fun 这个函数被调用了，但是被调用的同时又执行了传入到它身上的一个函数，即arguments[3]()这个语句，所以就会输出this[0]，它是个类数组对象枚举出函数进行调用，所以它的上下文就是arguments，this指向它。立即执行函数（IIFE），它的上下文就是 window 对象，所以它的this指向的是 window让我们通过一个例子理解一下：
obj.fun()由前文所讲，fun() 由 obj 调用，所以这里的this指向 obj；
obj 中的 fun 等于一个立即执行函数的返回值，
就相当于这里的this指向的是 obj，所以 this.a = 2；
在这个立即执行函数里面它的上下文对象是 window，所以它的this指向 window，所以这里面的let a = this.a 的this指向的会是 window 对象，所以 a = 1，所以它的返回值那里的 a = 1；
所以最终输出 1 + 2 = 3在定时器、延时器调用函数中，上下文对象是 window 对象，里面的this指向 window 对象让我们来通过一个例子来理解一下：
这里setTimeout的调用函数是obj.fun，它是由延时器调用的，它将在 2s 后运行，所以它的this指向 window 对象，输出 7如果我们这么写，那将会输出什么呢 ？
此时，setTimeout的第一个参数变成一个匿名函数，此时匿名函数的this指向的是 window 对象；
在匿名函数中obj.fun()，这个fun()是由 obj 调用的，所以此时fun里面的this指向的是 obj，所以输出 3事件处理函数的上下文是绑定事件的DOM 元素，this指向的是DOM 元素
即：让我们来通过一个例子来理解一下：当我们点击构建出来的三个盒子时，弹出的对话框中会输出对应的盒子 id
因为事件处理函数中，this指向的就是对应的DOM 元素到此，关于“JavaScript中this指向问题怎么理解”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注云技术网站，小编会继续努力为大家带来更多实用的文章！

相关推荐: 有哪些IE6常见bug解决方法

这篇文章主要讲解了“有哪些IE6常见bug解决方法”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“有哪些IE6常见bug解决方法”吧！ 1、IE6怪异解析之padding与border算入宽高原因：未加文档声明造…