this到底指向啥？看完这篇就知道了！

JS中的到底this是一个老生常谈的(de)问题(ti)了，因为它并不是指向知道一个确定的值，在不同情(qing)况下(xia)有不同的完篇指向，所以也经常使人困惑。到底本篇文章会谈谈我自己对this的指向知道(dao)理解。

this到底是完篇啥

其实this就是一个指针，它指示的到底就是当前的一个(ge)执行环境，可以用来对当前执行环境进行一些操作(zuo)。指向知道因为它指示的完篇是执行环境，所以在定义这个变量时，到底其(qi)实是指向知道不知道它真正的(de)值的(de)，只(zhi)有运行时(shi)才能确(que)定他的完(wan)篇值。同样一段代码，到底用不同的指向知道方(fang)式执行，他的完篇this指向可能是不一样的。我们来看(kan)看如(ru)下代码：

这个方法很简单，只是(shi)给this添加了一个name属性，我们把这个方(fang)法复制到Chrome调试(shi)工具看下(xia)结果：

上图中(zhong)我们直接调用(yong)了func()，发(fa)现this指(zhi)向的是window，name属性添加到了window上(shang)。下面我们换一种调用方式，我们换成new func()来调用：

我们看到输出了(le)两个func { name: "小小飞"}，一个是我们new返回的对(dui)象，另一个是方法里面的console。这两个值是一样的，说(shuo)明(ming)这时候方法里面(mian)this就指向了new返回的对象，而不是前(qian)面例子的window了。这是因为当(dang)你使用new去调用一个方法(fa)时，这个方法其实就作为构造函数使用了，这时候的this指向的是new出来的对象。

下面我们分(fen)别讲解下几种情况

使用new调用时，this指向new出来的对象

这个规则(ze)其实是JS面向对象的一部分，JS使用了一种很(hen)曲折的方(fang)式来支持面向对象。当你用new来执行一个函数时，这个函数就变成了一个类，new关键(jian)字会返回一个类的实(shi)例给你，这个函数会充当构造函数的(de)角色。作为面向对象的构造函数，必须要有能(neng)够给实例初始化属性的能力，所以构造函数里面必须要有某种机制(zhi)来操作生成的实例，这种机制就是this。让this指向生成的实例就可以通过this来操作实例了。关于JS的面向对象更详细的解释可以(yi)看这篇文(wen)章。

this的这种特(te)性还有一些妙用。一个(ge)函数可以直接调用，也(ye)可以用new调用，那假如我只想使用者通(tong)过new调用有没有办法呢？下图(tu)截取自(zi)Vue源码：

Vue巧妙利用了this的特(te)性，通过检查this是不是Vue的一个(ge)实例来检测使用者是通过new调用(yong)的(de)还(hai)是直接调用的。

这(zhe)个其实在最开始的例子就讲过了，那里没有明(ming)确调用者，this指向的(de)是window。我们这里讲另外一个例子，函数里面的函数，this指(zhi)向谁？

我们执行一下看看：

直接执行(xing)：

使用new执行：

我们发现无论是直接执行，还(hai)是使用(yong)new执行，this的值都指向的window。直接执行时很好理解，因为没有明确调用者(zhe)，那this自然就是window。需要注意的是使用new时，只有(you)被new的func才是构造函数，他的(de)this指向new出来的对象，他里(li)面的函数的this还是指向window。

有明确调用者时，this指向调(diao)用者

看这个例子：

上述例子很好理解，因为调用者是obj，所以func里(li)面的this就(jiu)指向obj，this.myName就是obj.myName。其实这一条和上(shang)一条可以合在一起，没有明确调用者时(shi)其实隐含的调用者就是window，所以经常有人说this总是指向调(diao)用者(zhe)。

下面我们将这个例子稍微改一下：

这里(li)的(de)输出应该是“大飞哥”，因为虽然anotherFunc的函数体跟obj.func一样，但是他的执行环境不一样，他其(qi)实(shi)没有明确的调用者，或者说调用者是(shi)window。这里的this.myName其实是window.myName，也就是(shi)“大飞哥”。

我们将这(zhe)个例子再改一下：

这次我们只(zhi)是(shi)将第一个var改成了let，但是我们的输出却变成了undefined。这是因为let，const定义变量，即使在最外层也不会变成window的属性，只有var定义的变量才会成为window的属性。

这句话的意思是箭头函数(shu)本身并不具有this，箭头函数在被申明确定(ding)this，这时候他会直接将当前作用域的this作为自己的this。还是之(zhi)前的例子我们将函数改为箭头函数：

上述代码里面的obj.func()输出也(ye)是“大飞(fei)哥”，是因为obj在创建时申明了箭头函数，这时候(hou)箭头函数会去寻找当前作用(yong)域，因为obj是(shi)一个对(dui)象，并不是作用域，所(suo)以这里(li)的作用域(yu)是window，this也就是window了。

再来看一个(ge)例子：

两个输出都是“小小飞”，obj.func().getName()输出(chu)“小小(xiao)飞”很好理解，这里箭头函数(shu)是在obj.func()的返回值里申明(ming)的，这时他的this其实就是func()的this，因为他是(shi)被obj调用的，所(suo)以this指向obj。

那为什么anotherFunc()输出也是(shi)“小小飞”呢？这是因为anotherFunc()输出的this，其实在anotherFunc赋值时(shi)就(jiu)确定了：

再来看一个构造函数里面(mian)的箭头(tou)函数，前面我们说了构造函数(shu)里面的函数，直接调用时，他(ta)的this指向window，但是如果这个函数时箭头函数呢：

这(zhe)里输出(chu)的是“小小飞”，原理还是(shi)一样的，箭头函数在申明时this确定为当前作用域的this，在这里就是func的作用域，跟func的this一样指向new出(chu)来的实例。如果不用new，而是直接(jie)调用，这里的this就指向window。

DOM事件回调里(li)面，this指向绑定事件的对象

currentTarget指的是(shi)绑定事件的DOM对象，target指的(de)是触发事件的对(dui)象。DOM事件(jian)回调里面this总是指向currentTarget，如果触发(fa)事件的对象刚好(hao)是绑定事(shi)件的对象(xiang)，即target === currentTarget，this也会顺便指向target。如果回调是箭头函数，this是箭头函数申明时作用域的this。

严格模式下this是undefined

注意这里(li)说的严格模式下this是(shi)undefined是指在函数体内部，如果本身就在全(quan)局作用域，this还是指向window。

this能改吗

this是能改的，call和apply都可以修改this，ES6里(li)面还(hai)新增了一个bind函数。

使用call和apply修改this

注意上面输出的名字是"小小飞"，也就是obj2.myName。正常直接调用obj.func()输出的名字应该是obj.myName，也(ye)就是"大飞哥"。但是如果你使用call来调用，call的第(di)一个参(can)数就是手动指定的(de)this。我们将它(ta)指定为obj2，那在函数里面的this.myName其(qi)实就是(shi)obj2.myName了。

apply方法(fa)跟call方法作用差不多，只是后面的函数参数形(xing)式不同，使用(yong)apply调用应该这样(yang)写，函数参数应该放到一个数(shu)组或者类数组里面：

之所以有call和apply两个方法(fa)实(shi)现了差不多的功能，是(shi)为了让大家使用方便，如果你拿到的参数是一个一个的，那就使用call吧，但是有时候拿到的(de)参数是arguments，这是函数的一个内置变量(liang)，是(shi)一个类数组结构，表示当前函数的所有参数，那就可以(yi)直接用apply，而不用(yong)将它展开了。

使用bind修(xiu)改this

bind是ES5引入的一个方法(fa)，也可以修改this，但是调用它并不会立即执行方法(fa)本身，而是会返回一个修改了this的(de)新方法：

bind和call，apply最大的区别就是call，apply会立即执行方法，而bind并(bing)不会(hui)立即执行，而是(shi)会返回一个新方法供后面使用。

bind函数也可以(yi)接收多(duo)个(ge)参数，第二个及以后的参数会作(zuo)为新(xin)函数的参数传(chuan)递进去，比如前面的bind也可以这样写：

自己写一个call

知道了call的作用，我们自己来写一个call：

自己写一个apply

apply方法跟call方(fang)法很像，区别只是在(zai)取(qu)调用参(can)数上：

自己写一个bind

自己写一个bind需要用到前面的apply，注意他的(de)返回值是一个方法

总结

文章的最后(hou)，感谢你花费宝贵的时间阅读本文，如果本文给(gei)了你一点(dian)点帮助或者启发，请不(bu)要吝啬你的赞和GitHub小星星，你的支(zhi)持是作者(zhe)持续创作的动力。

【责任(ren)编辑：庞桂玉