日了哈士奇系列之JavaScript閉包

標題爲何叫日了哈士奇？由於閉包這個東西已經在我腦海裏縈繞了好久，大概有多久呢？(掰手指頭和腳指頭ing....) 大概是筆者從事前端工做的第一個月開始吧......仍記得那個時候還請教了公司的大神，不過只怪當時腦殼很差使，反正就是沒聽懂啊喂！不過最近項目沒那麼忙，就回頭研究這個前端亙古不變得話題之一：閉包。誠然，閉包對於JavaScript初學者而言理解起來稍許有點吃力，不過我相信即便是初學者看了本篇博客，也會被閉包有更深的認識(「王婆賣瓜，自賣自詡」),hahah...廢話不扯了，趕忙開始吧。

話題引入

在開始介紹閉包以前呢，筆者先墨跡下。你們先來思考這樣一個問題：

如何從 函數A外部訪問 函數A內的變量?

不瞭解閉包的朋友可能會認爲這是一個愚蠢得像土撥鼠系列的問題，就是一個字：扯淡 (手動滑稽)。即便這樣子，筆者仍是不知廉恥得貼出上一篇博客的地址，由於這篇博客對解決這個問題有很大的幫助。下面就一塊兒思考如何回答上述的問題：
根據上篇博客的描述，要想訪問一個變量，那麼一定要在這個變量的做用域內訪問；其次，對於訪問函數中的變量，那隻能在函數中作點事(手)情(腳)，好比這樣：

function closure() {
    let name = 'Husky';
    let age = 2;

    //access variable
}

那麼既然已經在函數中訪問到了，那又如何才能實如今函數外訪問到呢？答案是確定是，只要再作點事(手)情(腳)就行了，不過先不急着思考怎麼辦，下面給你們形象化一個非(喪)常(心)有(病)趣(狂)的情景：
隔壁老王啊是個房東，今天有個美女要租他的房子。美女真是一(胸)身(大)正(臀)氣(翹)，因而老王想借此機會觀(偷)察(窺)一番。無奈天天晚上房間的門窗都被關得嚴嚴實實根本沒從下眼，老王就偷偷在裏面安裝了攝像頭，而後就肆無忌憚了...(手動滑稽)
情景描述完了，不過朋友們不要想入非非，畢竟筆者一身正氣啊喂！
改一下上面的代碼來將上述情景表達出來：

function Room() {
    let beauty = '如花';

    //攝像頭
    
}

那麼攝像頭能夠在房間裏捕(訪)捉(問)房(函)間(數)內(體)的影(變)像(量)，同時還能把捕捉到的情景傳回到老王的屏幕上。所以能夠聯想到，咱們在函數中放置一個對象而後在對象中訪問變量而且把這個對象return出去，咱們再接收返回回來的對象後不就能夠在外面訪問變量了嘛！Bingo...就是這樣。
俗話說，JavaScript世界中萬物皆對象(函數也是對象)。因此咱們能夠這樣補充上面的代碼：

function Room() {
    let beauty = '如花';

    //攝像頭
    let camera = function() {
        return beauty;
    }
}

這樣咱們就能獲取到一個函數，至關於攝像頭的信號線，經過這個就能夠獲取到影像咯：

function Room() {
    let beauty = '如花';

    //攝像頭
    let camera = function() {
        return beauty;
    }

    return camera`請輸入代碼`;
}

let camera = Room();

let beauty = camera();

console.log(`老王看到 ${beauty} 啦`);

看下運行結果：

而後咱們就幫助老王如願以償得看到了如花而且繼續每晚不可描述的事。(看我一臉正氣...)

說到這，閉包這個玩意兒已經浮出水面。

閉包

閉包，目前尚未統一的定義。單就筆者的理解就是：閉包是一個體系，由函數體中的變量和訪問該變量的函數組合而成。

對應上述的代碼就是：beauty 和 camera
閉包只是這類體系的名字，其英文名是Closure；閉包其實並無關閉的意思，相反它還向外暴露內部的變量只不過是經過必定的約束方式(函數)。舉個例子：

function closure(){
    let fronted=['js','css'];

    return function(){
        return fronted;
    }
}

let fronted = closure()(); <----運行兩次，分別運行closure和返回的匿名函數

console.log(fronted);
fronted.push('html');
console.log(fronted);

咱們在函數中聲明一個數組而且初始化它，最後經過匿名函數(推薦使用匿名函數)返回。這樣咱們能夠在函數外面得到內部的數組而且能夠進行一些操做，如上運行結果以下：

Chrome瀏覽器是如何來識別一個閉包的

不一樣的瀏覽器對閉包也有不一樣的理解。下面筆者使用世界上最好的瀏覽器Chrome瀏覽器來演示下它是如何去識別一個閉包的，代碼仍是用的上面那個代碼：

首先咱們要打兩個斷點

第一步運行，而且請觀察截圖中紅框框的地方

第二步運行，而且也請觀察截圖中紅框框的地方，比較和上一步的不一樣

沒錯，多了一個「Closure」對象 而且指向了(closure)這個函數，說明到這裏Chrome已經識別出了這是一個閉包。展開這個對象：

果真是世界上最好的瀏覽器，給咱們展現了閉包中訪問的變量。神器啊有木有...

閉包的原理

說了那麼多，那麼閉包的原理究竟是什麼呢？且聽我慢慢道來。
看過我上一篇博客的朋友都知道，想訪問一個變量那麼必需要處在這個變量的做用域中。好比fronted這個變量在closure函數中定義，那麼closure函數中的匿名函數就能夠訪問這個fronted變量。由於只能訪問父域或者同域的變量。當匿名函數在本身內部訪問了這個變量的時候就至關於持有了該變量的引用，因此當和這個匿名函數被 return 出去的時候，仍能夠訪問該變量。

閉包的能用來幹什麼

技術的出現時爲了解決一類問題，閉包能用來幹什麼呢？

隱藏變量

經過閉包，咱們能夠向外界輸出一個變量，不過並非直接暴露出去而是經過相似於接口的函數向外暴露，這樣既能夠在外界訪問這個變量又保證了這個變量不會被破壞。

模塊化的始祖

據筆者所瞭解，JavaScript模塊化就是借用閉包來實現的。經過定義一個module變量，而且向外暴露相關操做module的方法，來實現導入和導出。

使用閉包的注意點

一般來講，當一個函數運行結束後，函數中的變量內存會被回收掉，可是上一篇博客特意強調了閉包並不會這樣。實際上如例子所示，即便closure函數運行完了，可是它返回的匿名函數中仍持有變量fronted的引用，所以這個變量會一直存在於內存中而且不會被回收(初非人爲解除引用)。所以能夠預見性得猜到，若是咱們在程序中大量得使用閉包，那麼大量的變量存在於內存中而佔用前端內存資源會致使性能的降低。因此咱們在開發過程用要慎用閉包。