JavaScript中this指向

1、javascript中this指向1. 上下文与this的关系 通过理解上下文，我们可以越发清楚的明了this的指向问题 this的指向可以看成就是当前的上下文 2. 普通函数 先让我们通过一个例子来看看什么是函数中的this： let colors = green : "绿色", blue : "蓝色", showcolors : function() console.log("green: " + this.green + " b

2、lue: " + this.blue); colors.showcolors(); let show = colors.showcolors; show(); 第一个输出的是绿色和蓝色，此时函数的上下文是 colors，所以this指向 colors 其次个输出的是 undefined 和 undefined，此时挺直用圆括号调用函数，上下文就是 window，此时this指向的是 window 所以，我们可以看出函数的上下文也就是this是由调用函数的方式打算。 频繁的函数上下文状况： 对象打点调用它的办法函数，则函数上下文是这个打点的对象，this指向这个对象 obj.f

3、un(); 上下文就是 obj 挺直用圆括号调用函数，上下文就是 window 对象，this指向 window 对象 举个例子： function fun() return this.a + this.b; var a = 1; var b = 2; let obj = a : 5, b : fun(), fun : fun let res = obj.fun(); console.log(res); 在 obj 里面的 b 这里的 fun() 是挺直用圆括号调用的，所以此时的 fun() 上下文就是 window 对象，所以这里的this指向 window，b = 1 + 2 = 3； o

4、bj.fun() 的 fun() 是由 obj 打点调用的，所以它的上下文就是 obj，所以这里的this指向 obj，所以 res = 5 + 3 = 8 3. 数组 / 类数组对象 数组 / 类数组对象枚举出函数举行调用，上下文是这个数组 / 类数组对象 即可以看成： 数组下标(); 调用这个函数的上下文对象就是这个数组 1 让我们通过例子来理解一下： let arr = 1, 2, 3, function() console.log(this0); ; arr3(); 这里下标为 3 是个函数，通过数组枚举出来下标为 3 的对象，然后再执行，所以它的上下文就是这个数组

5、arr 类数组对象： 什么是类数组对象 ？ 全部键名为自然数序列（从 0 开头），且有length属性的对象 例如：arguments对象就是一个类数组对象，它是函数的实参列表 function fun() arguments3(); fun(1, 2, 3, function() console.log(this0); ) 这里 fun 这个函数被调用了，但是被调用的同时又执行了传入到它身上的一个函数，即arguments3()这个语句，所以就会输出this0，它是个类数组对象枚举出函数举行调用，所以它的上下文就是arguments，this指向它。 4. 立刻执行函数 立

6、刻执行函数（iife），它的上下文就是 window 对象，所以它的this指向的是 window 让我们通过一个例子理解一下： var a = 1; let obj = a : 2, fun : (function() let a = this.a; return function() console.log(a + this.a); )() ; obj.fun(); obj.fun()由前文所讲，fun() 由 obj 调用，所以这里的this指向 obj； obj 中的 fun 等于一个立刻执行函数的返回值， 就相当于 obj = function() console.log(a + t

7、his.a); 这里的this指向的是 obj，所以 this.a = 2； 在这个立刻执行函数里面它的上下文对象是 window，所以它的this指向 window，所以这里面的let a = this.a 的this指向的会是 window 对象，所以 a = 1，所以它的返回值那里的 a = 1； 所以终于输出 1 + 2 = 3 5. 定时器、延时器调用函数 在定时器、延时器调用函数中，上下文对象是 window 对象，里面的this指向 window 对象 让我们来通过一个例子来理解一下： let obj = a : 1, b : 2, fun : function

8、() console.log(this.a + this.b); var a = 3; var b = 4; settimeout(obj.fun, 2000); 这里settimeout的调用函数是obj.fun，它是由延时器调用的，它将在 2s 后运行，所以它的this指向 window 对象，输出 7 假如我们这么写，那将会输出什么呢 ？ let obj = a : 1, b : 2, fun : function() console.log(this.a + this.b); var a = 3; var b = 4; settimeout(function() obj.fun();

9、, 2000); 此时，settimeout的第一个参数变成一个匿名函数，此时匿名函数的this指向的是 window 对象； 在匿名函数中obj.fun()，这个fun()是由 obj 调用的，所以此时fun里面的this指向的是 obj，所以输出 3 6. 大事处理函数 大事处理函数的上下文是绑定大事的dom 元素，this指向的是dom 元素 即： dom元素.onclick = function() 这里的上下文就是 dom元素，this指向dom元素 ; 让我们来通过一个例子来理解一下： 大事处理函数 div width: 200px; height: 200px; float: left; border: 1px solid 000; margin-right: 10px; function show() alert("you click " + this.id); let box1 = document.getelementbyid(&39;box1&39;); let box2 = document.getelementbyid(&39;box2&39;); let box3 = document.getelementbyid(&39