上文簡單介紹了作用域,本文把作用域和上下文環境結合起來說一下,會理解的更深一些。
如上圖,我們在上文中已經介紹了,除了全局作用域之外,每個函數都會創建自己的作用域,作用域在函數定義時就已經確定了。而不是在函數調用時確定。
下面我們將按照程序執行的順序,一步一步把各個上下文環境加上。另外,對上下文環境不了解的朋友,可以去看看之前的兩篇文章:
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源碼解讀》