對(duì)于 JavaScript 新手來(lái)說(shuō)，this 是非常基礎(chǔ)同時(shí)也難以理解的知識(shí)點(diǎn)。

比如下面的代碼，this 指向就有三種方式。

在《你不知道的 JavaScript》一書(shū)中，我總算比較清晰理解了 this。

this 就是函數(shù)運(yùn)行時(shí)所在的環(huán)境對(duì)象，它指向運(yùn)行時(shí)所在的位置，而不是定義時(shí)的位置。

根據(jù) this 綁定規(guī)則，分為下面四種：

    1. 默認(rèn)綁定2.隱式綁定3. 顯式綁定4. new 綁定

1. 默認(rèn)綁定

默認(rèn)情況下，this 指向全局對(duì)象。例如下面的代碼。

不過(guò)，函數(shù)在嚴(yán)格模式下，this 無(wú)法指向全局對(duì)象，因此this會(huì)綁定到undefined。

2. 隱式綁定

當(dāng)函數(shù)作為方法被調(diào)用，需考慮運(yùn)行時(shí)上下文環(huán)境。
代碼中，foo()前面添加了obj對(duì)象的修飾，因此，obj對(duì)象就是函數(shù)的上下文。

this 會(huì)綁定到這個(gè)對(duì)象上。

另外，需要注意下面三種情況，它們會(huì)出現(xiàn)綁定對(duì)象丟失，從而把this綁定到全局對(duì)象或undefined上。

情況一

這段代碼中，雖然obj.foo()和bar()都指向同一函數(shù)，但執(zhí)行結(jié)果并不一樣。

可以理解為，bar()是一個(gè)不帶任何修飾的函數(shù)調(diào)用，等價(jià)于直接調(diào)用foo()，因此應(yīng)用了默認(rèn)綁定。

情況二

另一種情況，發(fā)生在回調(diào)函數(shù)中。原理和上面的情況一樣。

修改上面的代碼，obj.foo作為參數(shù)傳入doFoo()函數(shù)中，實(shí)際上，引用的是foo()函數(shù)本身，因此應(yīng)用了默認(rèn)綁定。
情況三

在一些流行的 JavaScript 庫(kù)，進(jìn)行事件處理操作時(shí)，回調(diào)函數(shù)的 this 可能會(huì)強(qiáng)制綁定到 DOM 元素上。

這種情況也值得注意。

3. 顯式綁定

JavaScript 提供了call()、apply()和bind()方法，可以強(qiáng)制綁定函數(shù)的this對(duì)象。
通過(guò)fn.call(obj)，我們將函數(shù)運(yùn)行時(shí)，this強(qiáng)制綁定到obj上。

call apply和bind的區(qū)別

call 和 apply 改變了函數(shù)的 this 上下文后，便執(zhí)行該函數(shù)，而 bind 則是將該函數(shù)返回。
call和apply的區(qū)別

call 和 apply 的區(qū)別在于傳入?yún)?shù)不同。

call 方法接收若干個(gè)參數(shù)列表。

apply 第一個(gè)參數(shù)和 call 一樣，第二個(gè)參數(shù)接收一個(gè)包含多個(gè)參數(shù)的數(shù)組。
4. new 綁定

如果使用 new 構(gòu)造函數(shù)，在函數(shù)內(nèi)部，this 指向新創(chuàng)建的對(duì)象。其他情況

需要忽略的this

若第三方庫(kù)的某個(gè)函數(shù)使用了 this，默認(rèn)綁定會(huì)把this指向全局對(duì)象，從而導(dǎo)致不可預(yù)測(cè)的后果。

一個(gè)安全的做法，就是使用顯式綁定，將函數(shù)的this指向空對(duì)象。
這方法通常也用于對(duì)象初始化，以獲得一個(gè)干凈且高度可定制的對(duì)象。

箭頭函數(shù)

箭頭函數(shù)常用于回調(diào)函數(shù)中。

它會(huì)繼承父級(jí)作用域 this 綁定的對(duì)象，等價(jià)于ES6之前self = this的書(shū)寫(xiě)方式。

此外還有軟綁定（softBind），用的不多，稍微了解一下即可。

最后，希望閱讀此文后能讓你軟件開(kāi)發(fā)的過(guò)程中 ，在JavaScript中清楚的了解到this的綁定規(guī)則。另外小編分類整理了許多java進(jìn)階學(xué)習(xí)材料和BAT面試題，需要資料的請(qǐng)轉(zhuǎn)發(fā)此文章后再私聊小編回復(fù)【java】就能領(lǐng)取2019年java進(jìn)階學(xué)習(xí)資料和BAT面試題以及《Effective Java》（第3版）電子版書(shū)籍。也可以加群：712263501領(lǐng)取海量學(xué)習(xí)資料進(jìn)行學(xué)習(xí)。

總結(jié)

以上是生活随笔為你收集整理的JavaScript中，this的绑定规则的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。