前端進(jìn)階 訓(xùn)練營(yíng)楊文堅(jiān)課代表study019我們?cè)趯W(xué)習(xí)JavaScript的過(guò)程中,由于對(duì)一些概念理解得不是很清楚,但是又想要通過(guò)一些方式把它記下來(lái),于是就很容易草率的給這些概念定下一些方便自己記憶的有偏差的結(jié)論。
危害比較大的是,有的不準(zhǔn)確的結(jié)論在網(wǎng)上還廣為流傳。
比如對(duì)于this指向的理解中,有這樣一種說(shuō)法:誰(shuí)調(diào)用它,this就指向誰(shuí)。在我剛開(kāi)始學(xué)習(xí)this的時(shí)候,我是非常相信這句話(huà)的。因?yàn)樵谝恍┣闆r下,這樣理解也還算說(shuō)得通??墒俏页3?huì)在開(kāi)發(fā)中遇到一些不一樣的情況,一個(gè)由于this的錯(cuò)誤調(diào)用,可以讓我懵逼一整天。那個(gè)時(shí)候我也查資料,在群里問(wèn)大神,可是我仍然搞不清楚“我特么到底錯(cuò)哪里了”。其實(shí)只是因?yàn)槲倚闹杏幸粋€(gè)不太準(zhǔn)確的結(jié)論。
這里吐槽一下百度搜索,搜索出來(lái)的文章,好多知識(shí)點(diǎn)都是錯(cuò)的,害了勞資好久所以,我認(rèn)為需要有這樣一篇文章,來(lái)幫助大家全方位的解讀this。讓大家對(duì)this,有一個(gè)正確的,全面的認(rèn)知。
在這之前,我們需要來(lái)回顧一下執(zhí)行上下文。
在前面幾篇文章中,我有好幾個(gè)地方都提到執(zhí)行上下文的生命周期,為了防止大家沒(méi)有記住,再次來(lái)回顧一下,如下圖。

執(zhí)行上下文生命周期
在執(zhí)行上下文的創(chuàng)建階段,會(huì)分別生成變量對(duì)象,建立作用域鏈,確定this指向。其中變量對(duì)象與作用域鏈我們都已經(jīng)仔細(xì)總結(jié)過(guò)了,而這里的關(guān)鍵,就是確定this指向。
在這里,我們需要得出一個(gè)非常重要一定要牢記于心的結(jié)論,this的指向,是在函數(shù)被調(diào)用的時(shí)候確定的。也就是執(zhí)行上下文被創(chuàng)建時(shí)確定的。因此我們可以很容易就能理解到,一個(gè)函數(shù)中的this指向,可以是非常靈活的。比如下面的例子中,同一個(gè)函數(shù)由于調(diào)用方式的不同,this指向了不一樣的對(duì)象。
vara=10;var obj={
a:20
function fn0{
console.log(this.a);fn0;//10
fn.call(obj);//20除此之外,在函數(shù)執(zhí)行過(guò)程中,this一旦被確定,就不可更改了。
vara=10;
var obj={
a:20
}
function fn 0{
this=obj;/∥這句話(huà)試圖修改this,運(yùn)行后會(huì)報(bào)錯(cuò)
console.log(this.a);
}
fn0;
前端進(jìn)階 訓(xùn)練營(yíng)楊文堅(jiān)課代表