很多前端人員對JavaScript中函數(shù)this的取值感到迷域，感覺沒有一個簡單的任何情況都適用的規(guī)則，即使有多年經(jīng)驗的JavaScript程序員，也只是記住或者總結(jié)了在各種情況下的規(guī)則，但是仍沒有能統(tǒng)領(lǐng)全景的規(guī)則，所以，當(dāng)他們遇到本文中第4部分《不容易理解的函數(shù)調(diào)用方式》的代碼時，仍然搞不清this的值；
為了弄清this的本質(zhì)機制，我進行了一系列的研究，并總結(jié)出了一個萬能的且容易理解的規(guī)則；為了幫助大家理解，現(xiàn)分享研究成果如下：（若想更深入地理解JavaScript的各種特性，可以參考另一篇文章：《JavaScript的發(fā)現(xiàn)與理解》）
目錄
一. 函數(shù)this的取值機制
二. 數(shù)組的本質(zhì)
三. 調(diào)用數(shù)組中的函數(shù)時的this值
四. 不容易理解的函數(shù)調(diào)用方式
五.注意
內(nèi)容
一. 函數(shù)this的取值機制
經(jīng)過測試，總結(jié)得出以下結(jié)論：
結(jié)論1：容易理解的this取值機制
函數(shù)的this的值取決于函數(shù)的調(diào)用方式；
函數(shù)有2種調(diào)用方式，如下：
- 直接調(diào)用；如：fn()；
- 屬性調(diào)用；如：obj.fn()；
- 當(dāng)函數(shù)以直接調(diào)用的方式調(diào)用時，this的值為全局對象，如：winodw；
- 當(dāng)函數(shù)以屬性調(diào)用的方式調(diào)用時，this的值為調(diào)用函數(shù)的對象；
對象屬性調(diào)用有2種方式：
- 打點調(diào)用，如：
obj.attr； - 方括號調(diào)用，如：
obj["attr"]；
所有通過這2種屬性調(diào)用方式調(diào)用的函數(shù)的this的值都為調(diào)用函數(shù)的對象；
結(jié)論2：this取值的本質(zhì)機制
我認(rèn)為，本質(zhì)上，函數(shù)的this的值取決于函數(shù)對象的查找方式：
- 如果函數(shù)對象在被調(diào)用時是在作用域鏈上查找到的，則該函數(shù)中this的值為全局對象；
- 如果函數(shù)對象在被調(diào)用時是在原型鏈上查找到的，則該函數(shù)中this的值為調(diào)用函數(shù)的對象；
備注：
關(guān)于標(biāo)識符查找機制請參考《JavaScript中訪問屬性和訪問變量的標(biāo)識符查找規(guī)則》
因為：
- 當(dāng)函數(shù)以
直接調(diào)用的方式調(diào)用時，它是在作用域鏈上被查找到的，所以該函數(shù)中this的值為全局對象； - 當(dāng)函數(shù)以
屬性調(diào)用的方式調(diào)用時，它是在原型鏈上被查找到的，所以該函數(shù)中this的值為調(diào)用函數(shù)的對象；
所以：
結(jié)論1是正確的，并且結(jié)論1只是結(jié)論2的一個特例，即：結(jié)論2包含結(jié)論1；
二. 數(shù)組的本質(zhì)
數(shù)組的本質(zhì)還是對象，數(shù)組是通過對象實現(xiàn)的，它并沒有為索引加入新的機制，數(shù)組中的索引本質(zhì)是作為數(shù)組對象的屬性存在的，因為打點調(diào)用的屬性不能是數(shù)字，所以數(shù)組的索引不通過打點調(diào)用，只能通過方括號的方式調(diào)用；
三. 調(diào)用數(shù)組中的函數(shù)時的this值
因為數(shù)組中的索引本質(zhì)是作為數(shù)組對象的屬性存在的，所以調(diào)用數(shù)組中的函數(shù)（如：array[index]()；）時，被調(diào)用的函數(shù)的this的值為該數(shù)組對象；
四. 不容易理解的函數(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é)果的原因是：
- 因為對于代碼1和代碼2中的函數(shù)在被調(diào)用時，都是在原型鏈上查找到的，所以它們的執(zhí)行結(jié)果均為
The aObject； - 因為賦值語句
=在內(nèi)部本質(zhì)上是作為函數(shù)來實現(xiàn)的，并且這個函數(shù)有個返回值，會返回等號=右邊表達式的值，在代碼3中該返回值就是getWhere函數(shù)，所以(aObject.getWhere=aObject.getWhere)結(jié)果是getWhere函數(shù)，并且這個函數(shù)是從等號=函數(shù)的返回值中取得的；又因為返回值是在作用域鏈中查找到的，所以在getWhere被執(zhí)行時，this的值為全局對象，所以代碼3執(zhí)行結(jié)果是The Window；
五.注意
- 計算屬性的get和set函數(shù)中的this也符合上述規(guī)則；
- ES6引用了模塊機制，對模塊中頂層的this做了處理，使得在ES6的模塊中，頂層的this的值是undefined，所以，不應(yīng)該在頂層代碼使用this； 所以，如果在模塊中直接訪問全局對象（如 window 對象）的計算屬性（即：不是通過調(diào)用 window 屬性的方式來訪問，如
window.計算屬性名，而是直接訪問，如全局對象的計算屬性名），則該計算屬性的 set 和 get 函數(shù)的 this 也是 undefined ；
