很多前端人員對(duì)JavaScript中函數(shù)this的取值感到迷域输虱,感覺沒有一個(gè)簡(jiǎn)單的任何情況都適用的規(guī)則,即使有多年經(jīng)驗(yàn)的JavaScript程序員色难,也只是記住或者總結(jié)了在各種情況下的規(guī)則燎斩,但是仍沒有能統(tǒng)領(lǐng)全景的規(guī)則辖佣,所以,當(dāng)他們遇到本文中第4部分《不容易理解的函數(shù)調(diào)用方式》的代碼時(shí)谴咸,仍然搞不清this的值轮听;
為了弄清this的本質(zhì)機(jī)制,我進(jìn)行了一系列的研究岭佳,并總結(jié)出了一個(gè)萬能的且容易理解的規(guī)則血巍;為了幫助大家理解,現(xiàn)分享研究成果如下:(若想更深入地理解JavaScript的各種特性驼唱,可以參考另一篇文章:《JavaScript的發(fā)現(xiàn)與理解》)
目錄
一. 函數(shù)this的取值機(jī)制
二. 數(shù)組的本質(zhì)
三. 調(diào)用數(shù)組中的函數(shù)時(shí)的this值
四. 不容易理解的函數(shù)調(diào)用方式
五.注意
內(nèi)容
一. 函數(shù)this的取值機(jī)制
經(jīng)過測(cè)試藻茂,總結(jié)得出以下結(jié)論:
結(jié)論1:容易理解的this取值機(jī)制
函數(shù)的this的值取決于函數(shù)的調(diào)用方式;
函數(shù)有2種調(diào)用方式,如下:
- 直接調(diào)用辨赐;如:fn()优俘;
- 屬性調(diào)用;如:obj.fn()掀序;
- 當(dāng)函數(shù)以直接調(diào)用的方式調(diào)用時(shí)帆焕,this的值為全局對(duì)象,如:winodw不恭;
- 當(dāng)函數(shù)以屬性調(diào)用的方式調(diào)用時(shí)叶雹,this的值為調(diào)用函數(shù)的對(duì)象;
對(duì)象屬性調(diào)用有2種方式:
- 打點(diǎn)調(diào)用换吧,如:
obj.attr
折晦; - 方括號(hào)調(diào)用,如:
obj["attr"]
沾瓦;
所有通過這2種屬性調(diào)用方式調(diào)用的函數(shù)的this的值都為調(diào)用函數(shù)的對(duì)象满着;
結(jié)論2:this取值的本質(zhì)機(jī)制
我認(rèn)為,本質(zhì)上贯莺,函數(shù)的this的值取決于函數(shù)對(duì)象的查找方式:
- 如果函數(shù)對(duì)象在被調(diào)用時(shí)是在作用域鏈上查找到的风喇,則該函數(shù)中this的值為全局對(duì)象;
- 如果函數(shù)對(duì)象在被調(diào)用時(shí)是在原型鏈上查找到的缕探,則該函數(shù)中this的值為調(diào)用函數(shù)的對(duì)象魂莫;
備注:
關(guān)于標(biāo)識(shí)符查找機(jī)制請(qǐng)參考《JavaScript中訪問屬性和訪問變量的標(biāo)識(shí)符查找規(guī)則》
因?yàn)椋?/strong>
- 當(dāng)函數(shù)以
直接調(diào)用
的方式調(diào)用時(shí),它是在作用域鏈上被查找到的爹耗,所以該函數(shù)中this的值為全局對(duì)象耙考; - 當(dāng)函數(shù)以
屬性調(diào)用
的方式調(diào)用時(shí),它是在原型鏈上被查找到的潭兽,所以該函數(shù)中this的值為調(diào)用函數(shù)的對(duì)象琳骡;
所以:
結(jié)論1是正確的,并且結(jié)論1只是結(jié)論2的一個(gè)特例讼溺,即:結(jié)論2包含結(jié)論1;
二. 數(shù)組的本質(zhì)
數(shù)組的本質(zhì)還是對(duì)象最易,數(shù)組是通過對(duì)象實(shí)現(xiàn)的怒坯,它并沒有為索引加入新的機(jī)制,數(shù)組中的索引本質(zhì)是作為數(shù)組對(duì)象的屬性存在的藻懒,因?yàn)榇螯c(diǎn)調(diào)用的屬性不能是數(shù)字剔猿,所以數(shù)組的索引不通過打點(diǎn)調(diào)用,只能通過方括號(hào)的方式調(diào)用嬉荆;
三. 調(diào)用數(shù)組中的函數(shù)時(shí)的this值
因?yàn)閿?shù)組中的索引本質(zhì)是作為數(shù)組對(duì)象的屬性存在的归敬,所以調(diào)用數(shù)組中的函數(shù)(如:array[index]()
;)時(shí),被調(diào)用的函數(shù)的this的值為該數(shù)組對(duì)象汪茧;
四. 不容易理解的函數(shù)調(diào)用方式
假設(shè)在全局環(huán)境中有以下代碼:
var inWhere = "The Window";
var aObject = {
inWhere:"The aObject",
getWhere:function(){
return this.inWhere
}
};
則在全局環(huán)境下椅亚,以下三句代碼及其執(zhí)行結(jié)果如下:
代碼1:
aObject.getWhere(); //結(jié)果:"The aObject"
代碼2:
(aObject.getWhere)(); //結(jié)果:"The aObject"
代碼3:
(aObject.getWhere=aObject.getWhere)(); //結(jié)果:"The Window"
我認(rèn)為造成以上執(zhí)行結(jié)果的原因是:
- 因?yàn)閷?duì)于代碼1和代碼2中的函數(shù)在被調(diào)用時(shí),都是在原型鏈上查找到的舱污,所以它們的執(zhí)行結(jié)果均為
The aObject
呀舔; - 因?yàn)橘x值語句
=
在內(nèi)部本質(zhì)上是作為函數(shù)來實(shí)現(xiàn)的,并且這個(gè)函數(shù)有個(gè)返回值扩灯,會(huì)返回等號(hào)=
右邊表達(dá)式的值媚赖,在代碼3中該返回值就是getWhere函數(shù),所以(aObject.getWhere=aObject.getWhere)
結(jié)果是getWhere函數(shù)珠插,并且這個(gè)函數(shù)是從等號(hào)=
函數(shù)的返回值中取得的惧磺;又因?yàn)榉祷刂凳窃谧饔糜蜴溨胁檎业降模栽趃etWhere被執(zhí)行時(shí)捻撑,this的值為全局對(duì)象磨隘,所以代碼3執(zhí)行結(jié)果是The Window
;
五.注意
- 計(jì)算屬性的get和set函數(shù)中的this也符合上述規(guī)則布讹;
- ES6引用了模塊機(jī)制琳拭,對(duì)模塊中頂層的this做了處理,使得在ES6的模塊中描验,頂層的this的值是undefined白嘁,所以,不應(yīng)該在頂層代碼使用this膘流; 所以絮缅,如果在模塊中直接訪問全局對(duì)象(如 window 對(duì)象)的計(jì)算屬性(即:不是通過調(diào)用 window 屬性的方式來訪問,如
window.計(jì)算屬性名
呼股,而是直接訪問耕魄,如全局對(duì)象的計(jì)算屬性名
),則該計(jì)算屬性的 set 和 get 函數(shù)的 this 也是 undefined 彭谁;