深入理解javascript原型和閉包(14)——從【自由變數】到【作用域鏈】

王福朋發表於2014-09-25

先解釋一下什麼是“自由變數”。

在A作用域中使用的變數x,卻沒有在A作用域中宣告(即在其他作用域中宣告的),對於A作用域來說,x就是一個自由變數。如下圖

如上程式中,在呼叫fn()函式時,函式體中第6行。取b的值就直接可以在fn作用域中取,因為b就是在這裡定義的。而取x的值時,就需要到另一個作用域中取。到哪個作用域中取呢?

有人說過要到父作用域中取,其實有時候這種解釋會產生歧義。例如:

 

所以,不要在用以上說法了。相比而言,用這句話描述會更加貼切——要到建立這個函式的那個作用域中取值——是“建立”,而不是“呼叫”,切記切記——其實這就是所謂的“靜態作用域”。

對於本文第一段程式碼,在fn函式中,取自由變數x的值時,要到哪個作用域中取?——要到建立fn函式的那個作用域中取——無論fn函式將在哪裡呼叫。

 

上面描述的只是跨一步作用域去尋找。

如果跨了一步,還沒找到呢?——接著跨!——一直跨到全域性作用域為止。要是在全域性作用域中都沒有找到,那就是真的沒有了。

這個一步一步“跨”的路線,我們稱之為——作用域鏈

我們拿文字總結一下取自由變數時的這個“作用域鏈”過程:(假設a是自由量)

第一步,現在當前作用域查詢a,如果有則獲取並結束。如果沒有則繼續;

第二步,如果當前作用域是全域性作用域,則證明a未定義,結束;否則繼續;

第三步,(不是全域性作用域,那就是函式作用域)將建立該函式的作用域作為當前作用域;

第四步,跳轉到第一步。

 

以上程式碼中:第13行,fn()返回的是bar函式,賦值給x。執行x(),即執行bar函式程式碼。取b的值時,直接在fn作用域取出。取a的值時,試圖在fn作用域取,但是取不到,只能轉向建立fn的那個作用域中去查詢,結果找到了。

 

這一節看似很輕鬆的把作用域鏈引出來,並講完了。之所有輕鬆是有前幾節的基礎,否則將很難解釋。

接下來我們們開始正式說說一直期待依舊的朋友——閉包。敬請期待下一節。

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

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

另外,歡迎關注我的微博

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

相關文章