深入理解閉包系列第二篇——從執行環境角度看閉包
前面的話
本文從執行環境的角度來分析閉包,先用一張圖開宗明義,然後根據圖示內容對程式碼進行逐行說明,試圖對閉包進行更直觀的解釋
圖示
說明
下面按照程式碼執行流的順序對該圖示進行詳細說明
function foo(){ var a = 2; function bar(){ console.log(a); } return bar; } var baz = foo(); baz();
【1】程式碼執行流進入全域性執行環境,並對全域性執行環境中的程式碼進行宣告提升(hoisting)
【2】執行流執行第9行程式碼var baz = foo();,呼叫foo()函式,此時執行流進入foo()函式執行環境中,對該執行環境中的程式碼進行宣告提升過程。此時執行環境棧中存在兩個執行環境,foo()函式為當前執行流所在執行環境
【3】執行流執行第2行程式碼var a = 2;,對a進行LHS查詢,給a賦值2
【4】執行流執行第7行程式碼return bar;,將bar()函式作為返回值返回。按理說,這時foo()函式已經執行完畢,應該銷燬其執行環境,等待垃圾回收。但因為其返回值是bar函式。bar函式中存在自由變數a,需要通過作用域鏈到foo()函式的執行環境中找到變數a的值,所以雖然foo函式的執行環境被銷燬了,但其變數物件不能被銷燬,只是從活動狀態變成非活動狀態;而全域性執行環境的變數物件則變成活動狀態;執行流繼續執行第9行程式碼var baz = foo();
【5】執行流執行第10行程式碼baz();,通過在全域性執行環境中查詢baz的值,baz儲存著foo()函式的返回值bar。所以這時執行baz(),會呼叫bar()函式,此時執行流進入bar()函式執行環境中,對該執行環境中的程式碼進行宣告提升過程。此時執行環境棧中存在三個執行環境,bar()函式為當前執行流所在執行環境
在宣告提升的過程中,由於a是個自由變數,需要通過bar()函式的作用域鏈bar() -> foo() -> 全域性作用域進行查詢,最終在foo()函式中也就是程式碼第2行找到var a = 2;,然後在foo()函式的執行環境中找到a的值是2,所以給a賦值2
【6】執行流執行第5行程式碼console.log(a);,呼叫內部物件console,並從console物件中log方法,將a作為引數傳遞進入。從bar()函式的執行環境中找到a的值是2,所以,最終在控制檯顯示2
【7】執行流執行第6行程式碼},bar()的執行環境被彈出執行環境棧,並被銷燬,等待垃圾回收,控制權交還給全域性執行環境
【8】當頁面關閉時,所有的執行環境都被銷燬
總結
從上述說明的第5步可以看出,由於閉包bar()函式的原因,雖然foo()函式的執行環境銷燬了,但其變數物件一直存在於記憶體中,就是為了能夠使得呼叫bar()函式時,可以通過作用域鏈訪問到父函式foo(),並得到其變數物件中儲存的變數值。直到頁面關閉,foo()函式的變數物件才會和全域性的變數物件一起被銷燬,從而釋放記憶體空間
由於閉包占用記憶體空間,所以要謹慎使用閉包。儘量在使用完閉包後,及時解除引用,以便更早釋放記憶體
//通過將baz置為null,解除引用 function foo(){ var a = 2; function bar(){ console.log(a);//2 } return bar; } var baz = foo(); baz(); baz = null; /*後續程式碼*/