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

如上圖，我們在上文中已經介紹了，除了全局作用域之外，每個函數都會創建自己的作用域，作用域在函數定義時就已經確定了。而不是在函數調用時確定。

下面我們將按照程序執行的順序，一步一步把各個上下文環境加上。另外，對上下文環境不了解的朋友，可以去看看之前的兩篇文章：

http://www.rzrgm.cn/wangfupeng1988/p/3986420.html

http://www.rzrgm.cn/wangfupeng1988/p/3987563.html

第一步，在加載程序時，已經確定了全局上下文環境，并隨著程序的執行而對變量就行賦值。

第二步，程序執行到第27行，調用fn(10)，此時生成此次調用fn函數時的上下文環境，壓棧，并將此上下文環境設置為活動狀態。

第三步，執行到第23行時，調用bar(100)，生成此次調用的上下文環境，壓棧，并設置為活動狀態。

第四步，執行完第23行，bar(100)調用完成。則bar(100)上下文環境被銷毀。接著執行第24行，調用bar(200)，則又生成bar(200)的上下文環境，壓棧，設置為活動狀態。

第五步，執行完第24行，則bar(200)調用結束，其上下文環境被銷毀。此時會回到fn(10)上下文環境，變為活動狀態。

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

結束了。像老太太的裹腳布——又臭又長！

最后我們可以把以上這幾個圖片連接起來看看。

連接起來看，還是挺有意思的。作用域只是一個“地盤”，一個抽象的概念，其中沒有變量。要通過作用域對應的執行上下文環境來獲取變量的值。同一個作用域下，不同的調用會產生不同的執行上下文環境，繼而產生不同的變量的值。所以，作用域中變量的值是在執行過程中產生的確定的，而作用域卻是在函數創建時就確定了。

所以，如果要查找一個作用域下某個變量的值，就需要找到這個作用域對應的執行上下文環境，再在其中尋找變量的值。

雖然本文很長，但是文字較少，圖片居多，圖片都有形象的展示，大家花十幾分鐘也能慢慢看完。但是，這節內容真的很重要。

以上代碼中，咱們還沒有設計到跨作用域取值的情況，即——自由變量。詳細內容且聽下回分解。

---------------------------------------------------------------------------

本文已更新到《深入理解javascript原型和閉包系列》的目錄，更多內容可參見《深入理解javascript原型和閉包系列》。

另外，歡迎關注我的微博。

學習作者教程：《前端JS高級面試》《前端JS基礎面試題》《React.js模擬大眾點評webapp》《zepto設計與源碼分析》《json2.js源碼解讀》