JS中的this是一個老生常談的問題了，因為它并不是一個確定的值，在不同情況下有不同的指向，所以也經(jīng)常使人困惑。本篇文章會談談我自己對this的理解。

this到底是啥

其實this就是一個指針，它指示的就是當前的一個執(zhí)行環(huán)境，可以用來對當前執(zhí)行環(huán)境進行一些操作。因為它指示的是執(zhí)行環(huán)境，所以在定義這個變量時，其實是不知道它真正的值的，只有運行時才能確定他的值。同樣一段代碼，用不同的方式執(zhí)行，他的this指向可能是不一樣的。我們來看看如下代碼：

這個方法很簡單，只是給this添加了一個name屬性，我們把這個方法復制到Chrome調(diào)試工具看下結(jié)果：

上圖中我們直接調(diào)用了func()，發(fā)現(xiàn)this指向的是window，name屬性添加到了window上。下面我們換一種調(diào)用方式，我們換成new func()來調(diào)用：

我們看到輸出了兩個func {name: "小小飛"}，一個是我們new返回的對象，另一個是方法里面的console。這兩個值是一樣的，說明這時候方法里面this就指向了new返回的對象，而不是前面例子的window了。這是因為當你使用new去調(diào)用一個方法時，這個方法其實就作為構(gòu)造函數(shù)使用了，這時候的this指向的是new出來的對象。

下面我們分別講解下幾種情況

使用new調(diào)用時，this指向new出來的對象

這個規(guī)則其實是JS面向?qū)ο蟮囊徊糠?，JS使用了一種很曲折的方式來支持面向?qū)ο?。當你用new來執(zhí)行一個函數(shù)時，這個函數(shù)就變成了一個類，new關(guān)鍵字會返回一個類的實例給你，這個函數(shù)會充當構(gòu)造函數(shù)的角色。作為面向?qū)ο蟮臉?gòu)造函數(shù)，必須要有能夠給實例初始化屬性的能力，所以構(gòu)造函數(shù)里面必須要有某種機制來操作生成的實例，這種機制就是this。讓this指向生成的實例就可以通過this來操作實例了。關(guān)于JS的面向?qū)ο蟾敿毜慕忉尶梢钥催@篇文章。

this的這種特性還有一些妙用。一個函數(shù)可以直接調(diào)用，也可以用new調(diào)用，那假如我只想使用者通過new調(diào)用有沒有辦法呢？下圖截取自Vue源碼：

Vue巧妙利用了this的特性，通過檢查this是不是Vue的一個實例來檢測使用者是通過new調(diào)用的還是直接調(diào)用的。

沒有明確調(diào)用者時，this指向window

這個其實在最開始的例子就講過了，那里沒有明確調(diào)用者，this指向的是window。我們這里講另外一個例子，函數(shù)里面的函數(shù)，this指向誰？

我們執(zhí)行一下看看：

直接執(zhí)行：

使用new執(zhí)行：

我們發(fā)現(xiàn)無論是直接執(zhí)行，還是使用new執(zhí)行，this的值都指向的window。直接執(zhí)行時很好理解，因為沒有明確調(diào)用者，那this自然就是window。需要注意的是使用new時，只有被new的func才是構(gòu)造函數(shù)，他的this指向new出來的對象，他里面的函數(shù)的this還是指向window。

有明確調(diào)用者時，this指向調(diào)用者

看這個例子：

上述例子很好理解，因為調(diào)用者是obj，所以func里面的this就指向obj，this.myName就是obj.myName。其實這一條和上一條可以合在一起，沒有明確調(diào)用者時其實隱含的調(diào)用者就是window，所以經(jīng)常有人說this總是指向調(diào)用者。

下面我們將這個例子稍微改一下：

這里的輸出應該是“大飛哥”，因為雖然anotherFunc的函數(shù)體跟obj.func一樣，但是他的執(zhí)行環(huán)境不一樣，他其實沒有明確的調(diào)用者，或者說調(diào)用者是window。這里的this.myName其實是window.myName，也就是“大飛哥”。

我們將這個例子再改一下：

這次我們只是將第一個var改成了let，但是我們的輸出卻變成了undefined。這是因為let，const定義變量，即使在最外層也不會變成window的屬性，只有var定義的變量才會成為window的屬性。

箭頭函數(shù)并不會綁定this

這句話的意思是箭頭函數(shù)本身并不具有this，箭頭函數(shù)在被申明確定this，這時候他會直接將當前作用域的this作為自己的this。還是之前的例子我們將函數(shù)改為箭頭函數(shù)：

上述代碼里面的obj.func()輸出也是“大飛哥”，是因為obj在創(chuàng)建時申明了箭頭函數(shù)，這時候箭頭函數(shù)會去尋找當前作用域，因為obj是一個對象，并不是作用域，所以這里的作用域是window，this也就是window了。

再來看一個例子：

兩個輸出都是“小小飛”，obj.func().getName()輸出“小小飛”很好理解，這里箭頭函數(shù)是在obj.func()的返回值里申明的，這時他的this其實就是func()的this，因為他是被obj調(diào)用的，所以this指向obj。

那為什么anotherFunc()輸出也是“小小飛”呢？這是因為anotherFunc()輸出的this，其實在anotherFunc賦值時就確定了：

再來看一個構(gòu)造函數(shù)里面的箭頭函數(shù)，前面我們說了構(gòu)造函數(shù)里面的函數(shù)，直接調(diào)用時，他的this指向window，但是如果這個函數(shù)時箭頭函數(shù)呢：

這里輸出的是“小小飛”，原理還是一樣的，箭頭函數(shù)在申明時this確定為當前作用域的this，在這里就是func的作用域，跟func的this一樣指向new出來的實例。如果不用new，而是直接調(diào)用，這里的this就指向window。

DOM事件回調(diào)里面，this指向綁定事件的對象

currentTarget指的是綁定事件的DOM對象，target指的是觸發(fā)事件的對象。DOM事件回調(diào)里面this總是指向currentTarget，如果觸發(fā)事件的對象剛好是綁定事件的對象，即target === currentTarget，this也會順便指向target。如果回調(diào)是箭頭函數(shù)，this是箭頭函數(shù)申明時作用域的this。

嚴格模式下this是undefined

注意這里說的嚴格模式下this是undefined是指在函數(shù)體內(nèi)部，如果本身就在全局作用域，this還是指向window。

this能改嗎

this是能改的，call和apply都可以修改this，ES6里面還新增了一個bind函數(shù)。

使用call和apply修改this

注意上面輸出的名字是"小小飛"，也就是obj2.myName。正常直接調(diào)用obj.func()輸出的名字應該是obj.myName，也就是"大飛哥"。但是如果你使用call來調(diào)用，call的第一個參數(shù)就是手動指定的this。我們將它指定為obj2，那在函數(shù)里面的this.myName其實就是obj2.myName了。

apply方法跟call方法作用差不多，只是后面的函數(shù)參數(shù)形式不同，使用apply調(diào)用應該這樣寫，函數(shù)參數(shù)應該放到一個數(shù)組或者類數(shù)組里面：

之所以有call和apply兩個方法實現(xiàn)了差不多的功能，是為了讓大家使用方便，如果你拿到的參數(shù)是一個一個的，那就使用call吧，但是有時候拿到的參數(shù)是arguments，這是函數(shù)的一個內(nèi)置變量，是一個類數(shù)組結(jié)構(gòu)，表示當前函數(shù)的所有參數(shù)，那就可以直接用apply，而不用將它展開了。

使用bind修改this

bind是ES5引入的一個方法，也可以修改this，但是調(diào)用它并不會立即執(zhí)行方法本身，而是會返回一個修改了this的新方法：

bind和call，apply最大的區(qū)別就是call，apply會立即執(zhí)行方法，而bind并不會立即執(zhí)行，而是會返回一個新方法供后面使用。

bind函數(shù)也可以接收多個參數(shù)，第二個及以后的參數(shù)會作為新函數(shù)的參數(shù)傳遞進去，比如前面的bind也可以這樣寫：

自己寫一個call

知道了call的作用，我們自己來寫一個call：

自己寫一個apply

apply方法跟call方法很像，區(qū)別只是在取調(diào)用參數(shù)上：

自己寫一個bind

自己寫一個bind需要用到前面的apply，注意他的返回值是一個方法

總結(jié)

文章的最后，感謝你花費寶貴的時間閱讀本文，如果本文給了你一點點幫助或者啟發(fā)，請不要吝嗇你的贊和GitHub小星星，你的支持是作者持續(xù)創(chuàng)作的動力。