详解this指向问题

首先我们要明白一个问题，函数里面的this代表的是什么？

函数里面的this代表的是当前行为的执行的主体。同时在JavaScript里面当一个函数执行的时候存在一个执行环境，一般叫做context（上下文）。

例如 ：现在有一个吃饭的行为，那么里面的this代表的是什么？

funcation 吃饭 (){ console.log(this)//？ }

吃饭的行为不能自己发生，需要一个执行主题，例如小明.吃饭（）；这个时候函数里面的this代表的就是小明；同时小明可以在家里吃饭。那么：家、学校就是上下文，this就是小明，行为就是吃饭。小明可以在任何地方完成吃饭的行为，并且小明在吃饭的行为和在那里是没有关系的。 总结：在javascript里面this在哪个环境执行和在那里定义是没有关系的

如何区分javascript里面的this

主要存在如下的三条规则：

函数执行，首先看函数前面是否存在点，如果存在点，那么前面是谁，this就是谁。如果没有点，则就是window。匿名函数自执行里面的this永远是window，因为前面不可能存在点。当给某个DOM的某一件事绑定方法，当时间触发后，回调函数里面的this代表当前DOM 元素。

案例演示

1.函数执行，首先看函数前面是否存在点，如果存在点，那么前面是谁，this就是谁。如果没有点，则就是window。

案例一： function fn(){ console.log(this)//输出为window } fn() 案例二： var fn=function() { console.log( this ) } var obj = {fn} obj.fn()//输出{fn: ƒ} 代表当前对象obj 案例三： function fn(){ console.log(this) } function sum(){ fn() } sum()//输出为window 案例四： var fn = function() { console.log(this) } var obj = { sum: function() { fn() } } obj.sum() //输出window

2.匿名函数自执行里面的this永远是window，因为前面不可能存在点。

案例一： (function fn() { console.log(this) })()// 输出window

3.当给某个DOM的某一件事绑定方法，当时间触发后，回调函数里面的this代表当前DOM 元素

案例一： document.querySelector('#div1').onclick = function() { console.log(this)//输出 当前#div元素 } 案例二： function fn() { console.log(this) } document.querySelector('#div1').onclick = function() { fn()//输出 window }

总结：

在javascript中this在那个环境执行和在那里定义是没有关系的。

练习：

var number = 20; var obj = { number: 30, fn: (function(number) { this.number *= 3; number += 15; var number = 45; return function() { this.number *= 4; number += 20; console.log(number); }; })(number) }; var fn = obj.fn; fn(); obj.fn(); console.log(window.number, obj.number);