摘要：使用上一篇文章的例子來說明下自由變量進(jìn)階期深入淺出圖解作用域鏈和閉包訪問外部的今天是今天是其中既不是參數(shù)，也不是局部變量，所以是自由變量。

（關(guān)注福利，關(guān)注本公眾號回復(fù)[資料]領(lǐng)取優(yōu)質(zhì)前端視頻，包括Vue、React、Node源碼和實(shí)戰(zhàn)、面試指導(dǎo)）

本周正式開始前端進(jìn)階的第二期，本周的主題是作用域閉包，今天是第7天。

本計劃一共28期，每期重點(diǎn)攻克一個面試重難點(diǎn)，如果你還不了解本進(jìn)階計劃，點(diǎn)擊查看前端進(jìn)階的破冰之旅

如果覺得本系列不錯，歡迎轉(zhuǎn)發(fā)，您的支持就是我堅(jiān)持的最大動力。

JavaScript深入之閉包 ，由于微信不能訪問外鏈，點(diǎn)擊閱讀原文就可以啦。

本文是從作用域鏈的角度來介紹閉包，不同于上文圖解作用域和閉包，本文語言簡練，結(jié)構(gòu)清晰，相比上文要容易理解些。建議搭配上文一起閱讀。

紅寶書(p178)上對于閉包的定義：閉包是指有權(quán)訪問另外一個函數(shù)作用域中的變量的函數(shù)，

MDN 對閉包的定義為：閉包是指那些能夠訪問自由變量的函數(shù)。

其中自由變量，指在函數(shù)中使用的，但既不是函數(shù)參數(shù)arguments也不是函數(shù)的局部變量的變量，其實(shí)就是另外一個函數(shù)作用域中的變量。

使用上一篇文章的例子來說明下自由變量：【進(jìn)階2-1期】深入淺出圖解作用域鏈和閉包

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

其中date既不是參數(shù)arguments，也不是局部變量，所以date是自由變量。

總結(jié)起來就是下面兩點(diǎn)：

1、是一個函數(shù)（比如，內(nèi)部函數(shù)從父函數(shù)中返回）

2、能訪問上級函數(shù)作用域中的變量（哪怕上級函數(shù)上下文已經(jīng)銷毀）

首先來一個簡單的例子

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

var foo = checkscope(); // foo指向函數(shù)f
foo();                    // 調(diào)用函數(shù)f()

簡要的執(zhí)行過程如下：

進(jìn)入全局代碼，創(chuàng)建全局執(zhí)行上下文，全局執(zhí)行上下文壓入執(zhí)行上下文棧

全局執(zhí)行上下文初始化

執(zhí)行 checkscope 函數(shù)，創(chuàng)建 checkscope 函數(shù)執(zhí)行上下文，checkscope 執(zhí)行上下文被壓入執(zhí)行上下文棧

checkscope 執(zhí)行上下文初始化，創(chuàng)建變量對象、作用域鏈、this等

checkscope 函數(shù)執(zhí)行完畢，checkscope 執(zhí)行上下文從執(zhí)行上下文棧中彈出

執(zhí)行 f 函數(shù)，創(chuàng)建 f 函數(shù)執(zhí)行上下文，f 執(zhí)行上下文被壓入執(zhí)行上下文棧

f 執(zhí)行上下文初始化，創(chuàng)建變量對象、作用域鏈、this等

f 函數(shù)執(zhí)行完畢，f 函數(shù)上下文從執(zhí)行上下文棧中彈出

那么問題來了， 函數(shù)f 執(zhí)行的時候，checkscope 函數(shù)上下文已經(jīng)被銷毀了，那函數(shù)f是如何獲取到scope變量的呢？

上文（【進(jìn)階2-1期】深入淺出圖解作用域鏈和閉包）介紹過，函數(shù)f 執(zhí)行上下文維護(hù)了一個作用域鏈，會指向指向checkscope作用域，作用域鏈?zhǔn)且粋€數(shù)組，結(jié)構(gòu)如下。

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

所以指向關(guān)系是當(dāng)前作用域 --> checkscope作用域--> 全局作用域，即使 checkscopeContext 被銷毀了，但是 JavaScript 依然會讓 checkscopeContext.AO（活動對象） 活在內(nèi)存中，f 函數(shù)依然可以通過 f 函數(shù)的作用域鏈找到它，這就是閉包實(shí)現(xiàn)的關(guān)鍵。

上面介紹的是實(shí)踐角度，其實(shí)閉包有很多種介紹，說法不一。

湯姆大叔翻譯的關(guān)于閉包的文章中的定義，ECMAScript中，閉包指的是：

1、從理論角度：所有的函數(shù)。因?yàn)樗鼈兌荚趧?chuàng)建的時候就將上層上下文的數(shù)據(jù)保存起來了。哪怕是簡單的全局變量也是如此，因?yàn)楹瘮?shù)中訪問全局變量就相當(dāng)于是在訪問自由變量，這個時候使用最外層的作用域。

2、從實(shí)踐角度：以下函數(shù)才算是閉包：

即使創(chuàng)建它的上下文已經(jīng)銷毀，它仍然存在（比如，內(nèi)部函數(shù)從父函數(shù)中返回）

在代碼中引用了自由變量

var data = [];

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

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

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

循環(huán)結(jié)束后，全局執(zhí)行上下文的VO是

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

執(zhí)行 data[0] 函數(shù)的時候，data[0] 函數(shù)的作用域鏈為：

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

由于其自身沒有i變量，就會向上查找，所有從全局上下文查找到i為3，data[1] 和 data[2] 是一樣的。

解決辦法

改成閉包，方法就是data[i]返回一個函數(shù)，并訪問變量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

循環(huán)結(jié)束后的全局執(zhí)行上下文沒有變化。

執(zhí)行 data[0] 函數(shù)的時候，data[0] 函數(shù)的作用域鏈發(fā)生了改變：

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

匿名函數(shù)執(zhí)行上下文的AO為：

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

因?yàn)殚]包執(zhí)行上下文中貯存了變量i，所以根據(jù)作用域鏈會在globalContext.VO中查找到變量i,并輸出0。

上面必刷題改動一個地方，把for循環(huán)中的var i = 0，改成let i = 0。結(jié)果是什么，為什么？？？

var data = [];

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

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

JavaScript深入之閉包

【進(jìn)階1-1期】理解JavaScript 中的執(zhí)行上下文和執(zhí)行棧

【進(jìn)階1-2期】JavaScript深入之執(zhí)行上下文棧和變量對象

【進(jìn)階1-3期】JavaScript深入之內(nèi)存空間詳細(xì)圖解

【進(jìn)階1-4期】JavaScript深入之帶你走進(jìn)內(nèi)存機(jī)制

【進(jìn)階1-5期】JavaScript深入之4類常見內(nèi)存泄漏及如何避免

【進(jìn)階2-1期】深入淺出圖解作用域鏈和閉包

每周面試重難點(diǎn)計劃如下，如有修改會通知大家。每周一期，為期半年，準(zhǔn)備明年跳槽的小伙伴們可以把本公眾號[置頂]()了。

【進(jìn)階1期】 調(diào)用堆棧

【進(jìn)階2期】 作用域閉包

【進(jìn)階3期】 this全面解析

【進(jìn)階4期】 深淺拷貝原理

【進(jìn)階5期】 原型Prototype

【進(jìn)階6期】 高階函數(shù)

【進(jìn)階7期】 事件機(jī)制

【進(jìn)階8期】 Event Loop原理

【進(jìn)階9期】 Promise原理

【進(jìn)階10期】Async/Await原理

【進(jìn)階11期】防抖/節(jié)流原理

【進(jìn)階12期】模塊化詳解

【進(jìn)階13期】ES6重難點(diǎn)

【進(jìn)階14期】計算機(jī)網(wǎng)絡(luò)概述

【進(jìn)階15期】瀏覽器渲染原理

【進(jìn)階16期】webpack配置

【進(jìn)階17期】webpack原理

【進(jìn)階18期】前端監(jiān)控

【進(jìn)階19期】跨域和安全

【進(jìn)階20期】性能優(yōu)化

【進(jìn)階21期】VirtualDom原理

【進(jìn)階22期】Diff算法

【進(jìn)階23期】MVVM雙向綁定

【進(jìn)階24期】Vuex原理

【進(jìn)階25期】Redux原理

【進(jìn)階26期】路由原理

【進(jìn)階27期】VueRouter源碼解析

【進(jìn)階28期】ReactRouter源碼解析

本人Github鏈接如下，歡迎各位Star

http://github.com/yygmind/blog

我是木易楊，網(wǎng)易高級前端工程師，跟著我每周重點(diǎn)攻克一個前端面試重難點(diǎn)。接下來讓我?guī)阕哌M(jìn)高級前端的世界，在進(jìn)階的路上，共勉！

如果你想加群討論每期面試知識點(diǎn)，公眾號回復(fù)[加群]即可