let和閉包有啥關係

前言

閉包這個概念並非 JavaScript 的專利，本篇中描述的閉包均是 JavaScript 中的閉包，其相關的描述也均是圍繞 JavaScript 來的。在 JavaScript 中閉包是很常見的，有時甚至不經意間就寫出來了，可能本身尚未意識到。好比下面

{
    let a = 'a';
    function getBlockA() {
        return a;
    }
    let b = 'b';
} 
複製代碼

可能有人會質疑這不是閉包，由於這根本不像，彆着急反對，下面咱們一塊兒來看下這樣的寫法是否產生了閉包。

閉包的定義

對於閉包的描述一般有兩種：

• 閉包是在其詞法上下文中引用了非其局部變量的變量的函數
• 閉包是由函數和與其相關的引用環境組合而成

上面兩種描述必定程度上是對立的，一個描述的是函數，一個描述的是函數和其引用環境組成的總體。閉包只是使用和外在表現上很像函數，可是實際上並非函數，因此第二種說法應該更爲準確一些。固然在 JS 中第一種描述也是沒有什麼問題的，由於 JS 中可以帶着被其訪問的變量處處跑的只有函數了。

閉包出現的條件

其實閉包出現的條件並不複雜，在局部做用域訪問了其餘局部做用域中的變量就產生了閉包。也就是隻有一個條件：

1. 在局部做用域中訪問了其餘局部變量

是否是比想象中的更容易獲得一個閉包呢，其實在我寫以前也對閉包的產生有些誤解，開始理解的被定義的局部做用域必需要被使用了纔會產生閉包，咱們能夠藉助chrome的調試工具中的做用域顯示來理解閉包的產生。 考慮以下代碼：

function outer() {
    var outerVar = 'outer';
    function inner() {
        return outerVar;
    }
}
outer();
複製代碼

上面的代碼是否產生了閉包呢？咱們來看下調試工具中是怎麼體現的

如上圖可見在outer函數的結尾大括號處打上斷點，能夠查看outer函數的做用域（結尾處打斷點能夠更準確的得到所用變量的值），上圖中標識outer處的scope表示的就是斷點處所在做用域的變量，Locale就是outer函數做用域中定義的變量集合，Global表示的可訪問的全局變量集合。

outer的Scope中的locale裏面能夠看到變量outerVar，inner，其中outerVar的值是字符串outer，inner的值是一個函數。

展開inner函數能夠看到該函數的[[Scopes]]，這裏沒由Local類型的變量，可是有一個Closure，這裏沒有Locale的緣由是inner函數並無定義變量，而是引用了其父做用域outer函數做用域中的outerVal變量，咱們能夠在Closure中看到outerVal，這個Closure就是表示的該函數引用的其餘局部做用域的變量集合，當一個函數的[[Scopes]]中出現Closure就表示這個函數及其所引用的其餘局部做用域變量共同造成了一個閉包。

閉包中被忽略的細節

上面基本搞清了如何產生一個閉包，以及怎麼去觀察一個閉包，下面說說閉包中一般被忽略（大佬們以爲沒什麼好說的，菜鳥不知道的一些細節），下面先上一發強者鑑定術（理解的大佬請忽略本節）：

function outer() {
    var outerVal = new Array(1000000) ;
    
    function consoleOuterVal() {
        console.log(outerVal);
    }
    
    consoleOuterVal();
    
    function inner() {
        console.log('ok');
    }
    
    return inner;
};

for(var i=0; i<10000; i++) {
    outer();
}

複製代碼

這段代碼中是存在問題的，下面說下具體什麼問題。

共享閉包

上面的代碼中存在內存泄漏問題，下面經過調試工具看下這段代碼的狀況：

經過上圖可見consoleOuterVal和inner函數的[[Scopes]]中均出現了Closure，且其保存的變量均爲outerVal，inner中沒用引用outerVal變量，怎麼會該變量會出如今其Closure中呢？這其實是在獲得函數Closure中的變量時，JS引擎會把做用域下的全部閉包變量放在一塊兒，在該做用域下定義的函數都會獲得一個相同的Closure。這樣的話上面的inner也會擁有和consoleOuterVal函數同樣變量引用，且該變量一直沒法釋放，隨着循環的增長，內存天然就不夠用了。

關於共享閉包的 更多細節探討可訪問前端小祕密系列之閉包（非本人，這裏不要臉的引用下）。

不建議使用eval的緣由

在不少編碼規範中都會明確提到不要使用eval函數，或者使用時須要當心謹慎。 考慮以下代碼中inner的Closure：

function outer() {
    var outerVal = new Array(1000000) ;
    var str = "test";
    
    eval('console.log("test")')
    
    function inner() {
        console.log('ok');
    }
    
    return inner;
};

outer();
複製代碼

具體的緣由是，js 引擎在解析包含有eval的函數時會保留該函數中的全部能夠引用的變量保留在Clousre，由於根本不知道eval會插入什麼樣的語句，在該語句中會使用什麼變量也是不肯定的，因此函數中的全部能夠引用的變量都會保留，那麼在該函數中定義的其餘函數也會保留該函數的全部可引用變量，容易形成內存浪費，同時致使內存泄漏的可能性又增大不少。

let塊級做用域產生的閉包

上面說了那麼多，總結下閉包的出現條件，及其特色：

出現條件：在局部做用域中訪問了其餘局部變量

特色：

1. 函數引用的變量會被保留
2. 同一局部做用域下定義的函數產生的Closure共享

下面是文章開頭代碼的Scope狀況：

上圖中let定義的變量a出如今了getBlockA函數的做用域中，只是這個做用域既不是Local，也不是Closure，而是Block，Block表示的是塊級做用域，用let和const定義的變量纔會存在塊級做用域。這個塊級做用域和局部做用域（函數做用域）是沒有太大區別的，不一樣之處在於，塊級做用域僅僅約束let和const定義的變量的做用範圍，而局部做用域沒有這個限制，能夠約束全部該做用域定義的變量。

在這個示例中變量a做爲塊級做用域的變量，在getBlockA函數的做用域（局部做用域）中被引用了，是符合閉包出現的條件的。

如上圖所示，變量變量a被保留了，由於在全局函數getBlockA中被引用了，getBlockA是全局變量，全局變量不會被回收，這也就致使了被其引用的變量a會一直被保存在內存中不會被回收。

如上圖所示，getBlockA和getBlockB中的Block保留的變量是相同的，且這兩個函數分別只引用了其中一個變量，這說明在塊級做用域中定義的函數也會存在閉包的共享。

因此有let或const定義的變量而產生的塊級做用域中定義的函數徹底能夠認爲是閉包。

js中函數做用域和塊級做用域的區別

函數做用域是局部做用的一種，塊級做用域也是局部做用域的一種，這二者的共同點在於，都是經過一對大括號（{}）來定義其做用邊界的，其不一樣點主要在於：

1. 函數做用域的大括號必須是函數定義的大括號而塊級做用域的大括號沒有任何限制，只要是一對大括號就能夠
2. 函數做用域中這對大括號的邊界做用會對其中定義的全部變量生效，而塊級做用域中這對大括號的邊界限制僅僅對於let和const定義的變量纔會有做用，對於使用var定義的變量沒有做用。

閉包經常被人們用來作模塊化，其實有了let和const以後徹底能夠用一對大括號來模塊化，只需將不會對外暴露的變量使用let或const定義，對外暴露的接口使用var來定義，這樣就徹底能夠達到閉包模塊化的效果。只是let和const特性在ES標準中出現的同時，也出現了模塊化標準，因此用不上就是了。

結論

閉包是一個比較普遍的概念，狹義的理解其爲函數中定義的函數是存在侷限性的，至少在js中這個定義已經再也不適用於閉包，let和const定義的變量產生的塊級做用域已經打破了在函數中定義這一點，剩下的一點被定義的函數，若是存在別的形式能夠保留對某一做用域的訪問，且這種形式能夠被當作變量隨意傳遞的話，那麼這樣狹義的定義會被完全打破。

閉包的本質應該是某個做用域鏈對外暴露了一個訪問其內部變量的接口，且這個接口可訪問的變量是能夠被指定的。