站長(zhǎng)資訊網(wǎng)
本篇文章帶大家聊聊Javascript中的執(zhí)行上下文，分享一個(gè)思考題，通過(guò)對(duì)思考題的分析，想必會(huì)對(duì)執(zhí)行上下文有更加深入的理解。
在前面的幾篇文章中，我們深入了解了關(guān)于執(zhí)行上下文的三個(gè)重要成員：變量對(duì)象、作用域鏈和 this ，本篇文章是前四篇文章的的內(nèi)容的集合，聚合分散的知識(shí)點(diǎn)，做一個(gè)簡(jiǎn)單的鞏固。不知道有沒(méi)有人是上一篇來(lái)的，我們的上一篇留下了一個(gè)思考題，通過(guò)對(duì)思考題的分析，想必會(huì)對(duì)執(zhí)行上下文有更加深入的理解。
思考題
這里為了稍微將案例復(fù)雜化一點(diǎn)，做了一點(diǎn)點(diǎn)修改，但是并沒(méi)有改變?cè)}所考察的點(diǎn)。
function func(value){ getValue = function(){ console.log(value); }; return this } function getValue(){ console.log(5); } Func(1).getValue(); //為什么是1呢？
具體執(zhí)行分析
執(zhí)行全局代碼，創(chuàng)建全局執(zhí)行上下文，全局上下文被壓入執(zhí)行上下文棧
ECStack = [ globalContext ];
初始化全局上下文
globalContext = { VO: { func: reference to function func(){}, getValue: reference to function getValue(){} }, Scope: [globalContext.VO], this: globalContext.VO //全局上下文 }
初始化全局上下文同時(shí)創(chuàng)建了兩個(gè)函數(shù)，因此也會(huì)保存他們父級(jí)作用域鏈在他們的內(nèi)部屬性 [[scope]] 內(nèi)
func.[[scope]] = [ globalContext.VO ]; getValue.[[scope]] = [ globalContext.VO ];
此時(shí)開(kāi)始執(zhí)行代碼，執(zhí)行到最后的語(yǔ)句時(shí)先執(zhí)行 func 函數(shù)，也就創(chuàng)建按步驟 func 函數(shù)執(zhí)行上下文：
-
復(fù)制函數(shù) [[scope]] 屬性創(chuàng)建作用域鏈
-
用 arguments 創(chuàng)建活動(dòng)對(duì)象
-
初始化活動(dòng)對(duì)象
-
將活動(dòng)對(duì)象壓入 checksfunccope 作用域鏈頂端。
-
創(chuàng)建this，簡(jiǎn)單分析：MemberExpression 值為func，func是一個(gè)函數(shù)對(duì)象，理所當(dāng)然是一個(gè)Reference ，其中它的 base value 是 EnvironmentRecord ，所以它的 this 值為 ImplicitThisValue(ref)，返回值始終是 undefined ，非嚴(yán)格模式下，其值會(huì)被隱式轉(zhuǎn)換為全局對(duì)象。
funcContext = { AO: { arguments: { // 數(shù)組 0: 1, length: 1 } }, Scope: [AO, globalContext.VO], this: undefined }
可能有人會(huì)有疑問(wèn)，func 里的 getValue 呢？，因?yàn)樗](méi)有變量申明，因此他其實(shí)是一個(gè)屬性的賦值操作，在后面運(yùn)行時(shí)才會(huì)被執(zhí)行。
創(chuàng)建函數(shù)執(zhí)行上下文后壓入執(zhí)行上下文棧
ECStack = [ funcContext, globalContext ];
函數(shù)開(kāi)始執(zhí)行，此時(shí)就是為什么最后輸出是1的關(guān)鍵了，第一句賦值操作，那么就需要沿著執(zhí)行上下文去找變量 getValue，那么我們就來(lái)看 funcContext 中的作用域，首先找到 funcContext.AO 顯然并不存在 getValue 這一屬性，那么沿著作用域鏈往上找，找到了globalContext.VO ，找到了 getValue ，這時(shí)候就會(huì)給全局作用域下的 getValue 屬性重新賦值，賦的是一個(gè)函數(shù)的傳新版本，也就重新創(chuàng)建了函數(shù)作用域，將這個(gè)全新的 getValue 函數(shù)的父級(jí)作用域鏈保存在它在他們的內(nèi)部屬性 [[scope]] 內(nèi)：
getValue .[[scope]] = [ funcContext.AO, globalContext.VO ];
然后才繼續(xù)返回 this ，查找 funcContext 的 this ，即返回undefined；func 執(zhí)行上下文出棧
ECStack = [ globalContext ];
繼續(xù)執(zhí)行Func(1).getValue()，前半部分返回了 undefined ，此時(shí)系統(tǒng)隱式轉(zhuǎn)換為全局變量對(duì)象，從全局變量對(duì)象中找到 getValue 屬性。這時(shí)候我們發(fā)現(xiàn) getValue 早已不是當(dāng)年那個(gè)少年，執(zhí)行全新的 getValue 的函數(shù)執(zhí)行上下文并入棧：
getValueContext = { AO: { arguments: { // 數(shù)組 length: 0 } }, Scope: [ AO, funcContext.AO, globalContext.VO ], this: undefined } ECStack = [ getValueContext, globalContext ];
函數(shù)開(kāi)始執(zhí)行，發(fā)現(xiàn)她要輸出 value ,沿著作用域去找，getValueContext.AO 中并沒(méi)有這個(gè)屬性， 繼續(xù)往下找找到 funcContext.AO（注意！ ），在形參中 找到了 value 那么就輸出對(duì)樣的值，也就輸出了1。
函數(shù)執(zhí)行完畢，getValueContext 和 globalContext 相繼出棧并銷(xiāo)毀，代碼運(yùn)行完畢。
總結(jié)
本片以一個(gè)簡(jiǎn)單但又不簡(jiǎn)單的示例，將前面的四篇文章串聯(lián)起來(lái)，完整地分析了JS代碼執(zhí)行時(shí)執(zhí)行上下文的工作過(guò)程，希望大家對(duì)此能有更深的理解。但是，不知道有沒(méi)有細(xì)心的同學(xué)發(fā)現(xiàn)，上面的示例中，執(zhí)行 getValue 函數(shù)的過(guò)程中，由尋找屬性 value的步驟（標(biāo)記位置），那個(gè)時(shí)候 func 函數(shù)明明已經(jīng)執(zhí)行完畢了，他的執(zhí)行上下文已經(jīng)出棧了，為什么還能從他的執(zhí)行上下文中找到 value 屬性呢？這其實(shí)就是閉包產(chǎn)生的原理了，下一篇我們?nèi)匀挥眠@個(gè)示例去學(xué)習(xí)閉包產(chǎn)生的原理。
【推薦學(xué)習(xí)：javascript高級(jí)教程】
