從新認識 JS 中的閉包

本文在我的站點同步：ethanlv.cn/article/19

我只是個知識的搬運工~

淺約束與深約束

做用域肯定了程序裏一個語句的引用環境，語言的做用域規則能夠大體分爲兩類，靜態做用域規則和動態做用域規則。現代的語言大可能是靜態做用域的，固然也少有語言是絕對的靜態做用域，這就和少有語言是存粹的面向對象式或少有語言是純粹的解釋式同樣，語言的邊界本就是模糊的。

關於靜態做用域和動態做用域我相信你們都很清楚了，很少作解釋。

• 靜態做用域規則 也稱爲詞法做用域，是指引用環境依賴於能夠出現名字聲明的程序塊的詞法嵌套關係。

• 動態做用域規則 是指引用環境依賴於運行時遇到各類聲明的順序。

可是，上面的規則沒有考慮到一個特殊的場景：在那些容許建立子程序引用，例如把 子程序看成參數傳遞的語言裏，什麼時候把做用域規則應用於這種子程序？是在建立這種引用時，仍是在子程序被調用時。

對於動態做用域來講，這一問題就顯得格外重要，固然靜態做用域也是須要考慮到的。

要講清楚這個問題，首先，讓咱們來把 JS 看成一門動態做用域的語言。

如今，咱們有個函數 isErCiYuan，它接收兩個參數，第一個參數是人物特徵，第二個參數是一個子程序參數，咱們指望它接收一個打印函數 print，print依據 comment 值的不一樣而輸出不一樣的結果。天然的，咱們會在 isErCiYuan 這個函數中創建一個臨時變量 comment 依據函數的第一個參數而爲 comment 賦不一樣的值。

// 固然這是段沒法運行的代碼
function print(){
    console.log(`我${comment}二次元`)
}
function isErCiYuan(characteristic,print){
    let {gender,hobby} = characteristic
    let comment = ''
    //1 -> boy，0-> girl
    if(gender === 1 && hobby === '喜歡穿女裝'){
        comment = '是'
    }else{
        comment = '不是'
    }
    print()
}

複製代碼

爲了讓上面的代碼以咱們期待的方式正常工做，理所固然的咱們要在 print 函數被實際調用時再去創建變量 comment 的引用關係。

而這種讓做爲參數傳遞的子程序推遲創建引用環境約束的方式稱爲 淺約束，一般狀況下，採用動態做用域規則的語言都將這種約束方式做爲默認方式，與之對應的固然就是深約束了，即 在子程序做爲參數傳遞時就作好環境約束。一樣拿上面那段代碼來考慮，comment 此時就應該是空字符串了。

你沒有猜錯，靜態做用域規則的語言採用的方式基本都是深約束。

等等，爲何靜態做用域還須要考慮這一問題，咱們知道，在靜態做用域規則下，名字的意義原本就依賴於其詞法嵌套關係/位置，而不是實際的執行流呀。

看下面這段代碼：

function A(num,fn){
    function B(){
        console.log(num)
    }
    if(num > 0){
        fn()
    }else{
        A(1,B)
    }
}
function doNothing(){}
A(0,doNothing) 
複製代碼

在上面這種狀況下，咱們看到函數 A 遞歸執行了，這就致使 num 其實是存在多個實例的，那麼最終輸出的究竟是 0，仍是 1 呢。

若是是 0，那就是深約束，由於它在子程序 B 做爲參數傳遞時就抓住了當前實例，這一行爲沒有被推遲，此時 Num 是 0。JS 中打印出來的的結果就是 0，你也能夠本身試下。

如何實現深約束——閉包

要想實現深約束，就須要建立一種能顯式地表達引用環境的東西。咱們通常將某個函數（通常是入口函數）以及這種相關聯的引用環境（理解爲一個符號表）稱做閉包。閉包的特色是它捕獲了自由變量（在函數外部定義但在函數內被引用）。這一行爲能夠用於解釋咱們常說的 「閉包解決了父函數執行後上下文銷燬致使子函數不能獲取到父函數中變量的問題。」

如今，咱們給上面的代碼加點東西，直觀的看下閉包是什麼：

function A(num,fn){
    function B(){
        console.log(num)
    }
    if(num > 0){
        fn()
    }else{
        A(1,B)
        console.log(B.prototype) //加在這了
    }
}
function doNothing(){}
A(0,doNothing) 
複製代碼

B.prototype.constructor 下的 [[Scopes]] 中有一個 Closure(A)，裏面保存着變量 num，其值爲 0。

上面的這種閉包不太容易看出來，咱們來看個更廣泛的例子。

function fn1(){
    let a = 0;
    function fn2(){
        let b = 1;
        return function fn3(){
            console.log(a,b)
        }
    }
    return fn2()
}
let fn4 = fn1()
複製代碼

打印出 fn4 的 prototype 看看：

能夠看到這裏存在兩個閉包，以由內到外的順序排列，看到這，是否是做用域鏈的概念也更清晰了呢。

最後，彼得·蘭丁（Peter Landin）在1964年將術語「閉包」定義爲一種包含環境成分和控制成分的實體，而閉包的概念首次在1970年於 PAL 編程語言中徹底實現，用來支持詞法做用域的 頭等函數，也就是前文所闡述的當子函數能做爲參數傳遞時如何實現深約束的問題。咱們能夠將閉包簡單理解爲捕獲了特定自由變量的函數，藉助閉包的特色，咱們能夠實現私有變量的持久性和信息隱藏，這在不少狀況下很是有用，閉包也所以而廣爲流傳。

JS 中閉包的實現

function fn1(){
    let a = 0;
    function fn2(){
        let b = 1;
        return function fn3(){
            console.log(a,b)
        }
    }
    return fn2()
}
let fn4 = fn1()
複製代碼

閉包的實如今思路上是比較簡單的，以上面的代碼爲例， JS 引擎在預編譯階段經過對 fn2 內部函數的詞法掃描，找出是否存在內部函數引用外部函數變量的狀況，若是存在就打入對應的 Closure，最後放到 [[Scopes]] 中。要注意的是，這個過程是靜態分析的，那 eval 怎麼辦呢。

function test(){
    const a = 1;
    const b = 2;
    return function(){
        const c = 3
        eval('console.log(a,c)')
    }
}
複製代碼

對於上面這段代碼

你會發現，eval 把變量都包進去了，即便是實際上並無使用的。這種降級策略也許就是 eval 執行效率低的緣由之一吧，而 若是使用 new Function，由於其語法讓咱們得以顯式的指定變量名，天然就能夠在靜態分析時保證不打包多餘變量到 Closure 中。

function test(){
    const a = 1;
    const b = 2;
    return function(){
        const c = 3
        new Function(a,'console.log(a,c)')
    }
}
複製代碼

參考

• zh.wikipedia.org/wiki/%E9%97…
• 《程序設計語言實踐之路》第二版