深刻貫徹閉包思想，全面理解JS閉包造成過程

時間  2019-11-05
標籤 深刻 貫徹 閉包 思想 全面 理解 造成 過程 欄目 JavaScript 简体版
原文   原文鏈接

寫這篇文章以前，我對閉包的概念及原理模糊不清，一直以來都是以通俗的外層函數包裹內層....來欺騙本身。並無說這種說法的對與錯，我只是不想擁有從衆心理或者也能夠說若是咱們說出更好更低層的東西，逼格會提高好幾個檔次。。。javascript

談起閉包，它但是JavaScript兩個核心技術之一(異步和閉包),在面試以及實際應用當中，咱們都離不開它們，甚至能夠說它們是衡量js工程師實力的一個重要指標。下面咱們就羅列閉包的幾個常見問題，從回答問題的角度來理解和定義大家心中的閉包。前端

問題以下:java

1.什麼是閉包?

2.閉包的原理可不能夠說一下？ 

3.你是怎樣使用閉包的？

閉包的介紹

咱們先看看幾本書中的大體介紹:web

1.閉包是指有權訪問另外一個函數做用域中的變量的函數面試

2.函數對象能夠經過做用域關聯起來，函數體內的變量均可以保存在函數做用域內，這在計算機科學文獻中稱爲「閉包」,全部的javascirpt函數都是閉包編程

3.閉包是基於詞法做用域書寫代碼時所產生的必然結果。數組

4.. 函數能夠經過做用域鏈相互關聯起來，函數內部的變量能夠保存在其餘函數做用域內，這種特性在計算機科學文獻中稱爲閉包。瀏覽器

可見，它們各有各自的定義，但要說明的意思大同小異。筆者在這以前對它是知其然而不知其因此然，最後用了一天的時間從詞法做用域到做用域鏈的概念再到閉包的造成作了一次總的梳理，發現作人好清晰了...。性能優化

下面讓咱們拋開這些抽象而又晦澀難懂的表述，從頭開始理解，內化最後總結出本身的一段關於閉包的句子。我想這對面試以及充實開發者自身的理論知識很是有幫助。閉包

閉包的構成

詞法做用域

要理解詞法做用域，咱們不得不提及JS的編譯階段，你們都知道JS是弱類型語言，所謂弱類型是指不用預約義變量的儲存類型，並不能徹底歸納JS或與其餘語言的區別，在這裏咱們引用黃皮書(《你不知道的javascript》)上的給出的解釋編譯語言。

編譯語言

編譯語言在執行以前必需要經歷三個階段,這三個階段就像過濾器同樣，把咱們寫的代碼轉換成語言內部特定的可執行代碼。就好比咱們寫的代碼是var a = 1;，而JS引擎內部定義的格式是var,a,=,1 那在編譯階段就須要把它們進行轉換。這只是一個比喻，而事實上這只是在編譯階段的第一個階段所作的事情。下面咱們歸納一下，三個階段分別作了些什麼。

  1. 分詞/詞法分析(Tokenizing/Lexing)
    這就是咱們上面講的同樣，其實咱們寫的代碼就是字符串，在編譯的第一個階段裏，把這些字符串轉成詞法單元(toekn)，詞法單元咱們能夠想象成咱們上面分解的表達式那樣。（注意這個步驟有兩種可能性，當前這屬於分詞,而詞法分析，會在下面和詞法做用域一塊兒說。）
  2. 解析/語法分析(Parsing)
    在有了詞法單元以後，JS還須要繼續分解代碼中的語法以便爲JS引擎減輕負擔(總不能在引擎運行的過程當中讓它承受這麼多輪的轉換規則吧?) ，經過詞法單元生成了一個抽象語法樹(Abstract Syntax Tree),它的做用是爲JS引擎構造出一份程序語法樹，咱們簡稱爲AST。這時咱們不由聯想到Dom樹(扯得有點遠)，沒錯它們都是樹,以var,a,=,1爲例，它會以層爲單元劃分他們，例如: 頂層有一個 stepA 裏面包含着 "v"，stepA下面有一個stepB，stepB中含有 "a",就這樣一層一層嵌套下去....
  3. 代碼生成(raw code)
    這個階段主要作的就是拿AST來生成一份JS語言內部承認的代碼(這是語言內部制定的,並非二進制哦)，在生成的過程當中，編譯器還會詢問做用域的問題，仍是以 var a = 1;爲例，編譯器首先會詢問做用域，當前有沒有變量a，若是有則忽略，不然在當前做用域下建立一個名叫a的變量.

詞法階段

哈哈，終於到了詞法階段，是否是看了上面的三大階段，甚是懵逼，沒想到js還會有這樣繁瑣的經歷？ 其實，上面的歸納只是全部編譯語言的最基本的流程，對於咱們的JS而言，它在編譯階段作的事情可不只僅是那些，它會提早爲js引擎作一些性能優化等工做，總之，編譯器把全部髒活累活全乾遍了。

要說到詞法階段這個概念，咱們還要結合上面未結的分詞/詞法分析階段.來講...

詞法做用域是發生在編譯階段的第一個步驟當中，也就是分詞/詞法分析階段。它有兩種可能，分詞和詞法分析，分詞是無狀態的，而詞法分析是有狀態的。

那咱們如何判斷有無狀態呢？以 var a = 1爲例，若是詞法單元生成器在判斷a是否爲一個獨立的詞法單元時，調用的是有狀態的解析規則(生成器不清楚它是否依賴於其餘詞法單元，因此要進一步解析)。反之，若是它不用生成器判斷，是一條不用被賦予語意的代碼（暫時能夠理解爲不涉及做用域的代碼,由於js內部定義什麼樣的規則咱們並不清楚），那就被列入分詞中了。

這下咱們知道，若是詞法單元生成器拿不許當前詞法單元是否爲獨立的，就進入詞法分析，不然就進入分詞階段。

沒錯，這就是理解詞法做用域及其名稱來歷的基礎。

簡單的說，詞法做用域就是定義在詞法階段的做用域。詞法做用域就是你編寫代碼時，變量和塊級做用域寫在哪裏決定的。當詞法解析器(這裏只看成是解析詞法的解析器，後續會有介紹)處理代碼時，會保持做用域不變（除動態做用域）。

在這一小節中，咱們只須要了解：

  1. 詞法做用域是什麼?
  2. 詞法階段中 分詞/詞法分析的概念？
  3. 它們對詞法做用域的造成有哪些影響？

這節有兩個個忽略掉的知識點（詞法解析器，動態做用域），因主題限制沒有寫出來，之後有機會爲你們介紹。下面開始做用域。

做用域鏈

1. 執行環境

執行環境定義了變量或函數有權訪問的其餘數據。

環境棧能夠暫時理解爲一個數組(JS引擎的一個儲存棧)。

在web瀏覽器中，全局環境即window是最外層的執行環境，而每一個函數也都有本身的執行環境，當調用一個函數的時候，函數會被推入到一個環境棧中，當他以及依賴成員都執行完畢以後，棧就將其環境彈出，

先看一個圖 !

圖片描述

環境棧也有人稱作它爲函數調用棧(都是一回事，只不事後者的命名方式更傾向於函數)，這裏咱們統稱爲棧。位於環境棧中最外層是 window ， 它只有在關閉瀏覽器時纔會從棧中銷燬。而每一個函數都有本身的執行環境，

到這裏咱們應該知道：

  1. 每一個函數都有一個與之對應的執行環境。
  2. 當函數執行時，會把當前函數的環境押入環境棧中，把當前函數執行完畢，則摧毀這個環境。
  3. window 全局對象時棧中對外層的(相對於圖片來講，就是最下面的)。
  4. 函數調用棧與環境棧的區別 。 這二者就好像是 JS中原始類型和基礎類型 ｜ 引用類型與對象類型與複合類型 汗！

2. 變量對象與活動對象

執行環境，所謂環境咱們不難聯想到房子這一律念。沒錯，它就像是一個大房子，它不是獨立的，它會爲了完成更多的任務而攜帶或關聯其餘的概念。

每一個執行環境都有一個表示變量的對象-------變量對象，這個對象裏儲存着在當前環境中全部的變量和函數。

變量對象對於執行環境來講很重要，它在函數執行以前被建立。它包含着當前函數中全部的參數，變量，函數。這個建立變量對象的過程實際就是函數內數據(函數參數、內部變量、內部函數)初始化的過程。

在沒有執行當前環境以前，變量對象中的屬性都不能訪問！可是進入執行階段以後，變量對象轉變爲了活動對象，裏面的屬性都能被訪問了，而後開始進行執行階段的操做。因此活動對象實際就是變量對象在真正執行時的另外一種形式。

function fun (a){
    var n = 12;
    function toStr(a){
        return String(a);
    }
 }

在 fun 函數的環境中，有三個變量對象(壓入環境棧以前)，首先是arguments，變量n 與 函數 toStr ，壓入環境棧以後(在執行階段)，他們都屬於fun的活動對象。 活動對象在最開始時，只包含一個變量，即argumens對象。

到這裏咱們應該知道：

  1. 每一個執行環境有一個與之對應的變量對象。
  2. 環境中定義的全部變量和函數都保存在這個對象裏。
  3. 對於函數，執行前的初始化階段叫變量對象，執行中就變成了活動對象。

3. 做用域鏈

當代碼在一個環境中執行時，會建立變量對象的一個做用域鏈。用數據格式表達做用域鏈的結構以下。

[{當前環境的變量對象}，{外層變量對象}，{外層的外層的變量對象}, {window全局變量對象}] 每一個數組單元就是做用域鏈的一塊，這個塊就是咱們的變量對象。

做用於鏈的前端，始終都是當前執行的代碼所在環境的變量對象。全局執行環境的變量對象也始終都是鏈的最後一個對象。

function foo(){
        var a = 12;
        fun(a);
        function fun(a){
             var b = 8;
              console.log(a + b);
        }
    }  
    
   foo();

再來看上面這個簡單的例子，咱們能夠先思考一下，每一個執行環境下的變量對象都是什麼？ 這兩個函數它們的變量對象分別都是什麼？

咱們以fun爲例，當咱們調用它時，會建立一個包含 arguments，a，b的活動對象，對於函數而言，在執行的最開始階段它的活動對象裏只包含一個變量，即arguments(當執行流進入，再建立其餘的活動對象)。

在活動對象中，它依然表示當前參數集合。對於函數的活動對象，咱們能夠想象成兩部分，一個是固定的arguments對象，另外一部分是函數中的局部變量。而在此例中，a和b都被算入是局部變量中，即使a已經包含在了arguments中，但他仍是屬於。

有沒有發如今環境棧中，全部的執行環境均可以組成相對應的做用域鏈。咱們能夠在環境棧中很是直觀的拼接成一個相對做用域鏈。

圖片描述

下面咱們大體說下這段代碼的執行流程：

  1. 在建立foo的時候，做用域鏈已經預先包含了一個全局對象，並保存在內部屬性[[ Scope ]]當中。
  2. 執行foo函數，建立執行環境與活動對象後，取出函數的內部屬性[[Scope]]構建當前環境的做用域鏈(取出後，只有全局變量對象，而後此時追加了一個它本身的活動對象)。
  3. 執行過程當中遇到了fun，從而繼續對fun使用上一步的操做。
  4. fun執行結束，移出環境棧。foo所以也執行完畢，繼續移出。
  5. javscript 監聽到foo沒有被任何變量所引用，開始實施垃圾回收機制，清空佔用內存。

做用域鏈其實就是引用了當前執行環境的變量對象的指針列表，它只是引用，但不是包含。，由於它的形狀像鏈條，它的執行過程也很是符合，因此咱們都稱之爲做用域鏈，而當咱們弄懂了這其中的奧祕,就能夠拋開這種形式上的束縛，從原理上出發。

到這裏咱們應該知道：

  1. 什麼是做用域鏈。
  2. 做用域鏈的造成流程。
  3. 內部屬性 [[Scope]] 的概念。

使用閉包

從頭至尾，咱們把涉及到的技術點都過了一遍，寫的不太詳細也有些不許確，由於沒有通過事實的論證，咱們只大概瞭解了這個過程概念。

涉及的理論充實了，那麼如今咱們就要使用它了。 先上幾個最簡單的計數器例子：

var counter = (!function(){
    var num = 0;
    return function(){ return  ++num; }
 }())

 function counter(){
        var num = 0;
        return {
            reset:function(){
                num = 0;
            },
            count:function(){
                return num++;    
            }
        }
 }
 
 function counter_get (n){
    return {
        get counte(){
        return ++n;
        },
        set counte(m){
            if(m<n){ throw Error("error: param less than value"); }
            else {
                n = m; return n;
            }
        }
    }    
 }

相信看到這裏，不少同窗都預測出它們執行的結果。它們都有一個小特色，就是實現的過程都返回一個函數對象，返回的函數中帶有對外部變量的引用。

爲何非要返回一個函數呢 ?
由於函數能夠提供一個執行環境，在這個環境中引用其它環境的變量對象時，後者不會被js內部回收機制清除掉。從而當你在當前執行環境中訪問它時，它仍是在內存當中的。這裏千萬不要把環境棧和垃圾回收這兩個很重要的過程搞混了，環境棧通俗點就是調用棧，調用移入，調用後移出，垃圾回收則是監聽引用。

爲何能夠一直遞增呢 ?
上面已經說了，返回的匿名函數構成了一個單獨執行環境(事實上函數做爲代碼執行的最小單元環境，每個單元[函數]都是獨立的)，這個環境中的變量對象`被其餘變量所引用，js進行自動垃圾回收機制(GC:Garbage Collecation)時纔不會對它進行垃圾回收(否則呢，若是不這樣，代碼設計的會很繁瑣，js也沒有這麼靈活)。因此這個值會一直存在，例子中每次執行都會對他進行遞增。

性能會不會有損耗 ?
就拿這個功能來講，咱們爲了實現它使用了閉包，可是當咱們使用結束以後呢？ 不要忘了還有一個變量對其餘變量對象的引用。這個時候咱們爲了讓js能夠正常回收它，能夠手動賦值爲null;

以第一個爲例：

var counter = (!function(){
    var num = 0;
    return function(){ return  ++num; }
 }())
 var n = counter();
 n(); n();
 
 n = null;  // 清空引用，等待回收

咱們再來看上面的代碼，第一個是返回了一個函數，後兩個相似於方法，他們都能很是直接的代表閉包的實現，其實更值得咱們注意的是閉包實現的多樣性。

閉包面試題

一. 用屬性的存取器實現一個閉包計時器

見上例；

二. 看代碼，猜輸出

function fun(n,o) {
  console.log(o);
  return {
    fun:function(m){
      return fun(m,n);
    }
  };
}

var a = fun(0); a.fun(1); a.fun(2); a.fun(3);//undefined,?,?,?
var b = fun(0).fun(1).fun(2).fun(3);//undefined,?,?,?
var c = fun(0).fun(1); c.fun(2); c.fun(3);//undefined,?,?,?

這道題的難點除了閉包，還有遞歸等過程，筆者當時答這道題的時候也答錯了，真是噁心。下面咱們來分析一下。

首先說閉包部分，fun返回了一個可用.操做符訪問的fun方法(這樣說比較好理解)。在返回的方法中它的活動對象能夠分爲 [arguments[m],m,n,fun]。在問題中，使用了變量引用(接收了返回的函數)了這些活動對象。

在返回的函數中，有一個來自外部的實參m，拿到實參後再次調用並返回fun函數。此次執行fun時附帶了兩個參數，第一個是剛纔的外部實參(也就是調用時本身賦的)，注意第二個是上一次的fun第一個參數。

第一個，把返回的fun賦給了變量a，而後再單獨調用返回的fun，在返回的fun函數中第二個參數n正好把咱們上一次經過調用外層fun的參數又拿回來了，然而它並非鏈式的，可見咱們調用了四次，但這四次，只有第一次調用外部的fun時傳進去的，後面經過a調用的內部fun並不會影響到o的輸出，因此仔細琢磨一下不難看出最後結果是undefine 0,0,0。

第二個是鏈式調用，乍一看，和第一個沒有區別啊，只不過第一個是多了一個a的中間變量，可千萬不要被眼前的所迷惑呀!!!

// 第一個的調用方式 a.fun(1) a.fun(2) a.fun(3)
    {
        fun:function(){
              return fun()  // 外層的fun 
        }
    }
    
    //第二個的調用方式 fun(1).fun(2).fun(3)
    //第一次調用返回和上面的如出一轍
    //第二次之後有所不一樣
    return fun()  //直接返回外部的fun

看上面的返回，第二的不一樣在於，第二次調用它再次接收了{fun:return fun}的返回值,然而在第三次調用時候它就是外部的fun函數了。理解了第一個和第二個我相信就知道了第三個。最後的結果就不說了，能夠本身測一下。

三. 看代碼，猜輸出

for (var i = 1; i <= 5; i++) {
  setTimeout( function timer() {
      console.log(i);  
  }, 1000 );
  }

 for (var i = 1; i <= 5; i++) {
    (function(i){
        setTimeout( function () {
              console.log(i);
          },  1000 );
    })(i);
 }

上例中兩段代碼，第一個咱們在面試過程當中必定碰到過，這是一個異步的問題，它不是一個閉包，但咱們能夠經過閉包的方式解決。

第二段代碼會輸出 1- 5 ，由於每循環一次回調中都引用了參數i(也就是活動對象)，而在上一個循環中，每一個回調引用的都是一個變量i，其實咱們還能夠用其餘更簡便的方法來解決。

for (let i = 1; i <= 5; i++) {
               setTimeout( function timer() {
                          console.log(i);  
              }, 1000 );
  }

let爲咱們建立局部做用域，它和咱們剛纔使用的閉包解決方案是同樣的，只不過這是js內部建立臨時變量，咱們不用擔憂它引用過多形成內存溢出問題。

總結

咱們知道了

本章涉及的範圍稍廣，主要是想讓你們更全面的認識閉包，那麼到如今你知道了什麼呢？我想每一個人心中都有了答案。

1.什麼是閉包?

閉包是依據詞法做用域產生的必然結果。經過變相引用函數的活動對象致使其不能被回收，然而造成了依然能夠用引用訪問其做用域鏈的結果。

```
        (function(w,d){
                var s = "javascript";
        }(window,document))
    ```

有些說法把這種方式稱之爲閉包，並說閉包能夠避免全局污染，首先你們在這裏應該有一個本身的答案，以上這個例子是一個閉包嗎？

避免全局污染不假，但閉包談不上，它最多算是在全局執行環境之上新建了一個二級做用域，從而避免了在全局上定義其餘變量。切記它不是真正意義的閉包。

2.閉包的原理可不能夠說一下？

結合咱們上面講過的，它的根源起始於詞法階段，在這個階段中造成了詞法做用域。最終根據調用環境產生的環境棧來造成了一個由變量對象組成的做用域鏈，當一個環境沒有被js正常垃圾回收時，咱們依然能夠經過引用來訪問它原始的做用域鏈。

3.你是怎樣使用閉包的？

使用閉包的場景有不少，筆者最近在看函數式編程,能夠說在js中閉包其實就是函數式的一個重要基礎,舉個不徹底函數的栗子.

function calculate(a,b){
    return a + b;
 }

 function fun(){
    var ars = Array.from(arguments);
  
    
    return function(){
        var arguNum = ars.concat(Array.from(arguments))
        
        return arguNum.reduce(calculate)
    }
}

var n = fun(1,2,3,4,5,6,7);

var k = n(8,9,10);

delete n;

上面這個栗子，就是保留對 fun函數的活動對象(arguments[])，固然在咱們平常開發中還有更復雜的狀況，這須要不少函數塊，到那個時候，才能顯出咱們閉包的真正威力.

文章到這裏大概講完了，都是我本身的薄見和書上的一些內容，但願能對你們有點影響吧，固然這是正面的...若是哪裏文中有描述不恰當或你們有更好的看法還望指出，謝謝。

題外話:

讀一篇文章或者看幾頁書，也不過是幾分鐘的事情。可是要理解的話須要我的內化的過程，從輸入 到 理解 到 內化 再到輸出，這是一個很是合理的知識體系。我想不只僅對於閉包，它對任何知識來講都是同樣的重要，當某些知識融入到咱們身體時，須要把他輸出出去，告訴別人。這不只僅是「奉獻」精神，也是自我提升的過程。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程