深刻理解javascript原型和閉包（15）——閉包

前面提到的上下文環境和做用域的知識，除了瞭解這些知識以外，仍是理解閉包的基礎。

至於「閉包」這個詞的概念的文字描述，確實很差解釋，我看過不少遍，可是如今仍是記不住。

可是你只須要知道應用的兩種狀況便可——函數做爲返回值，函數做爲參數傳遞。

第一，函數做爲返回值

如上代碼，bar函數做爲返回值，賦值給f1變量。執行f1(15)時，用到了fn做用域下的max變量的值。至於如何跨做用域取值，能夠參考上一節。

 

第二，函數做爲參數被傳遞

如上代碼中，fn函數做爲一個參數被傳遞進入另外一個函數，賦值給f參數。執行f(15)時，max變量的取值是10，而不是100。

 

上一節講到自由變量跨做用域取值時，曾經強調過：要去建立這個函數的做用域取值，而不是「父做用域」。理解了這一點，以上兩端代碼中，自由變量如何取值應該比較簡單。（不明白的朋友必定要去上一節看看，這個很重要！）

 

另外，講到閉包，除告終合着做用域以外，還須要結合着執行上下文棧來講一下。

在前面講執行上下文棧時（http://www.cnblogs.com/wangfupeng1988/p/3989357.html），咱們提到當一個函數被調用完成以後，其執行上下文環境將被銷燬，其中的變量也會被同時銷燬。

可是在當時那篇文章中留了一個問號——有些狀況下，函數調用完成以後，其執行上下文環境不會接着被銷燬。這就是須要理解閉包的核心內容。

我們能夠拿本文的第一段代碼（稍做修改）來分析一下。

 

第一步，代碼執行前生成全局上下文環境，並在執行時對其中的變量進行賦值。此時全局上下文環境是活動狀態。

 

第二步，執行第17行代碼時，調用fn()，產生fn()執行上下文環境，壓棧，並設置爲活動狀態。

 

第三步，執行完第17行，fn()調用完成。按理說應該銷燬掉fn()的執行上下文環境，可是這裏不能這麼作。注意，重點來了：由於執行fn()時，返回的是一個函數。函數的特別之處在於能夠建立一個獨立的做用域。而正巧合的是，返回的這個函數體中，還有一個自由變量max要引用fn做用域下的fn()上下文環境中的max。所以，這個max不能被銷燬，銷燬了以後bar函數中的max就找不到值了。

所以，這裏的fn()上下文環境不能被銷燬，還依然存在與執行上下文棧中。

——即，執行到第18行時，全局上下文環境將變爲活動狀態，可是fn()上下文環境依然會在執行上下文棧中。另外，執行完第18行，全局上下文環境中的max被賦值爲100。以下圖：

 

第四步，執行到第20行，執行f1(15)，即執行bar(15)，建立bar(15)上下文環境，並將其設置爲活動狀態。

執行bar(15)時，max是自由變量，須要向建立bar函數的做用域中查找，找到了max的值爲10。這個過程在做用域鏈一節已經講過。

這裏的重點就在於，建立bar函數是在執行fn()時建立的。fn()早就執行結束了，可是fn()執行上下文環境還存在與棧中，所以bar(15)時，max能夠查找到。若是fn()上下文環境銷燬了，那麼max就找不到了。

使用閉包會增長內容開銷，如今很明顯了吧！

 

第五步，執行完20行就是上下文環境的銷燬過程，這裏就再也不贅述了。

 

閉包和做用域、上下文環境有着密不可分的關係，真的是「想說愛你不容易」！

另外，閉包在jQuery中的應用很是多，在這裏就不一一舉例子了。因此，不管你是想了解一個經典的框架/類庫，仍是想本身開發一個插件或者類庫，像閉包、原型這些基本的理論，是必定要知道的。不然，到時候出了BUG你都不知道爲何，由於這些BUG可能徹底在你的知識範圍以外。

 

到如今閉包就簡單介紹完了，下一節咱們再總結一下。

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

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

另外，歡迎關注個人微博。

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