深刻理解javascript原型和閉包（13）-【做用域】和【上下文環境】

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

如上圖，咱們在上文中已經介紹了，除了全局做用域以外，每一個函數都會建立本身的做用域，做用域在函數定義時就已經肯定了。而不是在函數調用時肯定。

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

http://www.cnblogs.com/wangfupeng1988/p/3986420.html

http://www.cnblogs.com/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源碼解讀》