先说this:this是JS中的一个关键字,它只能在函数体内部使用。他代表了这个函数运行时的环境对象,这句话听起来有些拗口,我们就简单理解它代表了一个JS对象 {}。
this的指向问题其实,一句话也基本能概括:谁调用的this指向谁,(箭头函数除外)。(“谁"代表的是"对象")。
![bf1e9f826922968ddfe7f9660dfed146.png](https://img-blog.csdnimg.cn/img_convert/bf1e9f826922968ddfe7f9660dfed146.png)
window调用a函数的所以this指向window
我们改成另外一个对象去调用呢?
![ed35c385c2bf2131647c6180af1ccdc9.png](https://img-blog.csdnimg.cn/img_convert/ed35c385c2bf2131647c6180af1ccdc9.png)
obj调用a函数,这个a函数里面的this就会指向obj
我们在实际工作中,可能会有多种this指向搞不清,主要有一下几种情况:
1,作为返回值时里面的this。
![cea7c742903adffa62e41b3aa1a76cba.png](https://img-blog.csdnimg.cn/img_convert/cea7c742903adffa62e41b3aa1a76cba.png)
上述调用obj.a()实际返回的是个函数体。第二个执行相当于(function () {console.log(this) })();调用return匿名函数的实际上还是window。
2,构造函数中的this。
![d4fbb885a9f43e696f20f1e26c1db6b8.png](https://img-blog.csdnimg.cn/img_convert/d4fbb885a9f43e696f20f1e26c1db6b8.png)
new A() 返回了一个新对象
直接调用A,相当于window.A(),指向window。new A() 产生了一个新对象,new的作用之一就是把构造函数里面的this指向这个新对象。
3,函数作为参数时里面的this。
![bbf4833cadca993bc4bdf3fc89bac783.png](https://img-blog.csdnimg.cn/img_convert/bbf4833cadca993bc4bdf3fc89bac783.png)
callback执行相当于window.callbak()
实际上b函数是window调用,a函数是由obj调用。
我们再分下实际具体情况:
1,定时器
![10cf59f6a2af588e258119d0ff8e760d.png](https://img-blog.csdnimg.cn/img_convert/10cf59f6a2af588e258119d0ff8e760d.png)
这就是类似上面第三种情况,其实b也是由window调用的
定时器中的回调函数实际调用者是window。
2,DOM事件
![180ff0b1ea03805fd729175b2625b544.png](https://img-blog.csdnimg.cn/img_convert/180ff0b1ea03805fd729175b2625b544.png)
btn的onclick属性是个函数。当事件触发的时候就是btn去调用这个onclick函数。所以this指向btn。
仔细想想可能谁调用this指向谁,这句话也可能不对,但是它确实解决了我工作中大部分的this指向问题。当然我们知道了this的指向,我们也要知道如何去改变this的指向。这个以后在说明吧!