擼了今年阿里、頭條和美團(tuán)的面試，我有一個重要發(fā)現(xiàn).......>>>

上文簡單介紹了作用域，本文把作用域和上下文環(huán)境結(jié)合起來說一下，會理解的更深一些。

如上圖，我們在上文中已經(jīng)介紹了，除了全局作用域之外，每個函數(shù)都會創(chuàng)建自己的作用域，作用域在函數(shù)定義時就已經(jīng)確定了。而不是在函數(shù)調(diào)用時確定。
下面我們將按照程序執(zhí)行的順序，一步一步把各個上下文環(huán)境加上。

第一步，在加載程序時，已經(jīng)確定了全局上下文環(huán)境，并隨著程序的執(zhí)行而對變量就行賦值。

第二步，程序執(zhí)行到第27行，調(diào)用fn(10)，此時生成此次調(diào)用fn函數(shù)時的上下文環(huán)境，壓棧，并將此上下文環(huán)境設(shè)置為活動狀態(tài)。

第三步，執(zhí)行到第23行時，調(diào)用bar(100)，生成此次調(diào)用的上下文環(huán)境，壓棧，并設(shè)置為活動狀態(tài)。

第四步，執(zhí)行完第23行，bar(100)調(diào)用完成。則bar(100)上下文環(huán)境被銷毀。接著執(zhí)行第24行，調(diào)用bar(200)，則又生成bar(200)的上下文環(huán)境，壓棧，設(shè)置為活動狀態(tài)。

第五步，執(zhí)行完第24行，則bar(200)調(diào)用結(jié)束，其上下文環(huán)境被銷毀。此時會回到fn(10)上下文環(huán)境，變?yōu)榛顒訝顟B(tài)。

第六步，執(zhí)行完第27行代碼，fn(10)執(zhí)行完成之后，fn(10)上下文環(huán)境被銷毀，全局上下文環(huán)境又回到活動狀態(tài)。

結(jié)束了。像老太太的裹腳布——又臭又長！
最后我們可以把以上這幾個圖片連接起來看看。

連接起來看，還是挺有意思的。作用域只是一個“地盤”，一個抽象的概念，其中沒有變量。要通過作用域?qū)?yīng)的執(zhí)行上下文環(huán)境來獲取變量的值。同一個作用域下，不同的調(diào)用會產(chǎn)生不同的執(zhí)行上下文環(huán)境，繼而產(chǎn)生不同的變量的值。所以，作用域中變量的值是在執(zhí)行過程中產(chǎn)生的確定的，而作用域卻是在函數(shù)創(chuàng)建時就確定了。
所以，如果要查找一個作用域下某個變量的值，就需要找到這個作用域?qū)?yīng)的執(zhí)行上下文環(huán)境，再在其中尋找變量的值。
雖然本文很長，但是文字較少，圖片居多，圖片都有形象的展示，大家花十幾分鐘也能慢慢看完。但是，這節(jié)內(nèi)容真的很重要。
以上代碼中，咱們還沒有設(shè)計到跨作用域取值的情況，即——自由變量。詳細(xì)內(nèi)容且聽下回分解。

?

總結(jié)

以上是生活随笔為你收集整理的深入理解javascript原型和闭包（13）-【作用域】和【上下文环境】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。