【進階2-2期】JavaScript深刻之從做用域鏈理解閉包（轉）

這是我在公衆號（高級前端進階）看到的文章，如今作筆記   https://github.com/yygmind/blog/issues/18

紅寶書(p178)上對於閉包的定義：閉包是指有權訪問另一個函數做用域中的變量的函數，

MDN 對閉包的定義爲：閉包是指那些可以訪問自由變量的函數。

其中自由變量，指在函數中使用的，但既不是函數參數arguments也不是函數的局部變量的變量，其實就是另一個函數做用域中的變量。

使用上一篇文章的例子來講明下自由變量

function getOuter(){
  var date = '1127';
  function getDate(str){
    console.log(str + date);  //訪問外部的date
  }
  return getDate('今天是：'); //"今天是：1127"
}
getOuter();

其中date既不是參數arguments，也不是局部變量，因此date是自由變量。

總結起來就是下面兩點：

• 一、是一個函數（好比，內部函數從父函數中返回）
• 二、能訪問上級函數做用域中的變量（哪怕上級函數上下文已經銷燬）

分析

首先來一個簡單的例子

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}

var foo = checkscope(); // foo指向函數f
foo();                    // 調用函數f()

簡要的執行過程以下：

1. 進入全局代碼，建立全局執行上下文，全局執行上下文壓入執行上下文棧

2. 全局執行上下文初始化

3. 執行 checkscope 函數，建立 checkscope 函數執行上下文，checkscope 執行上下文被壓入執行上下文棧

4. checkscope 執行上下文初始化，建立變量對象、做用域鏈、this等

5. checkscope 函數執行完畢，checkscope 執行上下文從執行上下文棧中彈出

6. 執行 f 函數，建立 f 函數執行上下文，f 執行上下文被壓入執行上下文棧

7. f 執行上下文初始化，建立變量對象、做用域鏈、this等

8. f 函數執行完畢，f 函數上下文從執行上下文棧中彈出

那麼問題來了， 函數f 執行的時候，checkscope 函數上下文已經被銷燬了，那函數f是如何獲取到scope變量的呢？

上文（【進階2-1期】深刻淺出圖解做用域鏈和閉包）介紹過，函數f 執行上下文維護了一個做用域鏈，會指向指向checkscope做用域，做用域鏈是一個數組，結構以下。

fContext = {
    Scope: [AO, checkscopeContext.AO, globalContext.VO],
}

因此指向關係是當前做用域 --> checkscope做用域--> 全局做用域，即便 checkscopeContext 被銷燬了，可是 JavaScript 依然會讓 checkscopeContext.AO（活動對象） 活在內存中，f 函數依然能夠經過 f 函數的做用域鏈找到它，這就是閉包實現的關鍵。

概念

上面介紹的是實踐角度，其實閉包有不少種介紹，說法不一。

湯姆大叔翻譯的關於閉包的文章中的定義，ECMAScript中，閉包指的是：

• 一、從理論角度：全部的函數。由於它們都在建立的時候就將上層上下文的數據保存起來了。哪怕是簡單的全局變量也是如此，由於函數中訪問全局變量就至關因而在訪問自由變量，這個時候使用最外層的做用域。

• 二、從實踐角度：如下函數纔算是閉包：

  • 即便建立它的上下文已經銷燬，它仍然存在（好比，內部函數從父函數中返回）
  • 在代碼中引用了自由變量

面試必刷題

var data = [];

for (var i = 0; i < 3; i++) {
  data[i] = function () {
    console.log(i);
  };
}

data[0]();
data[1]();
data[2]();

若是知道閉包的，答案就很明顯了，都是3

循環結束後，全局執行上下文的VO是

globalContext = {
    VO: {
        data: [...],
        i: 3
    }
}

執行 data[0] 函數的時候，data[0] 函數的做用域鏈爲：

data[0]Context = {
    Scope: [AO, globalContext.VO]
}

因爲其自身沒有i變量，就會向上查找，全部從全局上下文查找到i爲3，data[1] 和 data[2] 是同樣的。

解決辦法

改爲閉包，方法就是data[i]返回一個函數，並訪問變量i

var data = [];

for (var i = 0; i < 3; i++) {
  data[i] = (function (i) {
      return function(){
          console.log(i);
      }
  })(i);
}

data[0]();    // 0
data[1]();    // 1
data[2]();    // 2

循環結束後的全局執行上下文沒有變化。

執行 data[0] 函數的時候，data[0] 函數的做用域鏈發生了改變：

data[0]Context = {
    Scope: [AO, 匿名函數Context.AO, globalContext.VO]
}

匿名函數執行上下文的AO爲：

匿名函數Context = {
    AO: {
        arguments: {
            0: 0,
            length: 1
        },
        i: 0
    }
}

由於閉包執行上下文中貯存了變量i，因此根據做用域鏈會在globalContext.VO中查找到變量i,並輸出0。

思考題

上面必刷題改動一個地方，把for循環中的var i = 0，改爲let i = 0。結果是什麼，爲何？？？

var data = [];

for (let i = 0; i < 3; i++) {
  data[i] = function () {
    console.log(i);
  };
}

data[0]();
data[1]();
data[2]();