深入理解javascript原型和閉包(15)——閉包

王福朋發表於2014-09-26

前面提到的上下文環境和作用域的知識,除了瞭解這些知識之外,還是理解閉包的基礎。

至於“閉包”這個詞的概念的文字描述,確實不好解釋,我看過很多遍,但是現在還是記不住。

但是你只需要知道應用的兩種情況即可——函式作為返回值,函式作為引數傳遞。

第一,函式作為返回值

如上程式碼,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原始碼解讀

相關文章