JavaScript中函數(shù)的上下文——this

curried 發(fā)布于2019-08-22 13:45 / 1398人閱讀

摘要：上下文初步了解我們來(lái)研究一下函數(shù)的上下文，所謂的上下文就是指函數(shù)里面的是誰(shuí)。即函數(shù)內(nèi)部的指向。瀏覽器運(yùn)行結(jié)果因?yàn)閳A括號(hào)調(diào)用函數(shù)，上下文是對(duì)象。此時(shí)點(diǎn)擊誰(shuí)，就是誰(shuí)定時(shí)器調(diào)用函數(shù)，上下文是對(duì)象函數(shù)函數(shù)被定時(shí)器調(diào)用，此時(shí)函數(shù)的上下文就是對(duì)象。

1.上下文初步了解：

我們來(lái)研究一下函數(shù)的上下文（context），所謂的上下文就是指函數(shù)里面的this是誰(shuí)。

當(dāng)一個(gè)函數(shù)當(dāng)做對(duì)象的方法被調(diào)用的時(shí)候，這個(gè)函數(shù)里面this表示這個(gè)對(duì)象：

現(xiàn)在我們調(diào)用sayHello函數(shù)的時(shí)候，是通過(guò)obj打點(diǎn)調(diào)用的，所以現(xiàn)在這個(gè)sayHello函數(shù)的上下文就是obj對(duì)象。即sayHello函數(shù)內(nèi)部的this指向obj。
但是，千萬(wàn)不要認(rèn)為寫(xiě)在對(duì)象里面的函數(shù)，上下文一定是這個(gè)對(duì)象！！
比如：

瀏覽器運(yùn)行結(jié)果：

因?yàn)閳A括號(hào)調(diào)用函數(shù)，上下文是window對(duì)象。
函數(shù)的上下文是什么，取決于函數(shù)怎么調(diào)用，而不是函數(shù)如何定義。
函數(shù)的上下文是函數(shù)的調(diào)用時(shí)表現(xiàn)的性質(zhì)，不是函數(shù)定義的時(shí)候?qū)懰赖男再|(zhì)。

2.函數(shù)上下文遵循五個(gè)規(guī)律

2.1函數(shù)用圓括號(hào)調(diào)用，函數(shù)的上下文是window對(duì)象

函數(shù)function fun(){}的上下文是什么呢？不要看它怎么定義，要看它怎么調(diào)用。此時(shí)是fun()函數(shù)名加上圓括號(hào)直接調(diào)用，上下文就是window對(duì)象！
而我們知道：所有的全局變量都是window對(duì)象的屬性，（注意：函數(shù)里面的局部變量，不是window的屬性，不是任何東西的屬性，它就是一個(gè)變量。）程序彈出666。
2.2函數(shù)如果作為一個(gè)對(duì)象的方法，對(duì)象打點(diǎn)調(diào)用，函數(shù)的上下文就是這個(gè)對(duì)象
比如下面的例子，我們把fun函數(shù)定義出來(lái)了，然后又把這個(gè)函數(shù)綁定給了obj對(duì)象的c屬性：

調(diào)用的時(shí)候，是“對(duì)象.函數(shù)()”
此時(shí)根據(jù)規(guī)律，函數(shù)里面的this是這個(gè)對(duì)象。所以能夠彈出1。
2.3函數(shù)是事件處理函數(shù)，函數(shù)的上下文就是觸發(fā)這個(gè)事件的對(duì)象
下面我們定義了一個(gè)fun，然后把這個(gè)fun當(dāng)做了3個(gè)DOM元素的事件處理函數(shù)：

函數(shù)不會(huì)執(zhí)行，直到用戶點(diǎn)擊了某一個(gè)div標(biāo)簽。此時(shí)點(diǎn)擊誰(shuí)，this就是誰(shuí)！
2.4定時(shí)器調(diào)用函數(shù)，上下文是window對(duì)象

函數(shù)fun被定時(shí)器調(diào)用，此時(shí)函數(shù)的上下文就是window對(duì)象。每秒鐘能彈出1.
2.5數(shù)組中存放的函數(shù)，被數(shù)組索引之后加圓括號(hào)調(diào)用，this就是這個(gè)數(shù)組
比如：

一定要敏感：
arr[0]();
此時(shí)這個(gè)函數(shù)是從數(shù)組中枚舉出來(lái)然后加圓括號(hào)執(zhí)行的，所以最終調(diào)用者可以認(rèn)為是這個(gè)數(shù)組，上下文就是這個(gè)數(shù)組！