JavaScript干货分享—-this指向
2020-06-16 本文已影响0人
锤子技术
平时用this有些混乱,所以写个总结。
没有箭头函数之前,我们说this就是函数运行时所在的环境对象,但是在箭头函数中this就是定义时所在的对象,先说大家熟知的:函数运行时所在的环境对象。
1、作为函数调用,this指向全局对象
![](https://img.haomeiwen.com/i23705837/89b4880a57ee1ff9.png)
2、作为对象的方法调用,该对象即为调用上下文,this指向该对象。
![](https://img.haomeiwen.com/i23705837/ed05d394bc3e71ab.png)
3、作为构造函数调用,构造函数试图初始化这个新创建的对象,并将这个对象作为其调用上下文,this 指向这个新创建的对象。
![](https://img.haomeiwen.com/i23705837/677a241afdf9b65a.png)
4、通过函数的call/apply方法间接调用, call/apply方法的第一个参数是调用上下文,在函数体内,通过this获得对它的引用。
![](https://img.haomeiwen.com/i23705837/4358a5c8b76bfb05.png)
箭头函数中this对象就是定义时所在的作用域,也就是说箭头函数本身没有this,内部的this就是外层代码块作用域中的this。
5、独立函数
![](https://img.haomeiwen.com/i23705837/3f696134c69b3865.png)
该箭头函数在全局环境中定义,即this指向window
6、对象的方法
![](https://img.haomeiwen.com/i23705837/da2131a5096748d6.png)
如上所示,foo在全局中定义,所以this指向window,那么如何使this指向obj?
根据上一篇介绍,当函数作为对象的方法调用时this指向该对象,可以这样改写:
![](https://img.haomeiwen.com/i23705837/9f9e464f46f068cf.png)
func在foo调用时定义,此时的foo所在作用域为obj,因此this指向obj
7、构造函数,因箭头函数没有this,固不能用作构造函数,否则会报错
![](https://img.haomeiwen.com/i23705837/1055082f0c12cf58.png)
8、bind/call
![](https://img.haomeiwen.com/i23705837/7d2f9adc45cc3652.png)
如上:func定义在全局,因此打印0,同对象方法,我们可以通过如下改写,打印出1
![](https://img.haomeiwen.com/i23705837/d5f677c38764d8eb.png)
更多前端开发干货获取
免费获取【30G从入门到精通前端学习文档】
免费获取【50本前端系列电子书教程】
或:关注、转发、私信回复“1”即可获取免费下载地址
★★或添加扫描QQ:990179203 ★★
![](https://img.haomeiwen.com/i23705837/84740f9e033c866d.png)
![](https://img.haomeiwen.com/i23705837/09c726477f79254d.png)
![](https://img.haomeiwen.com/i23705837/2ab2f14d5cd8713c.png)