摘要：閉包面試題解由于作用域鏈機(jī)制的影響，閉包只能取得內(nèi)部函數(shù)的最后一個值，這引起的一個副作用就是如果內(nèi)部函數(shù)在一個循環(huán)中，那么變量的值始終為最后一個值。

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

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

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

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

深入javascript——作用域和閉包 ，由于微信不能訪問外鏈，點(diǎn)擊閱讀原文就可以啦。

本篇文章介紹了作用域、作用域鏈和閉包，然后重點(diǎn)介紹一個面試題的3種解法，并給出詳細(xì)解答，歡迎閱讀原文留言評論。

作用域指的是一個變量和函數(shù)的作用范圍，JS中函數(shù)內(nèi)聲明的所有變量在函數(shù)體內(nèi)始終是可見的，在ES6前有全局作用域和局部作用域，但是沒有塊級作用域（catch只在其內(nèi)部生效），局部變量的優(yōu)先級高于全局變量。

變量提升

var scope="global";
function scopeTest(){
    console.log(scope);
    var scope="local"  
}
scopeTest(); //undefined

上面的代碼輸出是undefined，這是因為局部變量scope變量提升了，等效于下面

var scope="global";
function scopeTest(){
    var scope;
    console.log(scope);
    scope="local"  
}
scopeTest(); //undefined

注意，如果在局部作用域中忘記var，那么變量就被聲明為全局變量。

沒有塊級作用域

var data = [];

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

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

上篇文章已經(jīng)介紹過了，【進(jìn)階2-2期】JavaScript深入之從作用域鏈理解閉包

每個函數(shù)都有自己的執(zhí)行上下文環(huán)境，當(dāng)代碼在這個環(huán)境中執(zhí)行時，會創(chuàng)建變量對象的作用域鏈，作用域鏈?zhǔn)且粋€對象列表或?qū)ο箧?，它保證了變量對象的有序訪問。

作用域鏈的開始是當(dāng)前代碼執(zhí)行環(huán)境的變量對象，常被稱之為“活躍對象”（AO），變量的查找會從第一個鏈的對象開始，如果對象中包含變量屬性，那么就停止查找，如果沒有就會繼續(xù)向上級作用域鏈查找，直到找到全局對象中

function createClosure(){
    var name = "jack";
    return {
        setStr:function(){
            name = "rose";
        },
        getStr:function(){
            return name + ":hello";
        }
    }
}
var builder = new createClosure();
builder.setStr();
console.log(builder.getStr()); //rose:hello

上面在函數(shù)中返回了兩個閉包，這兩個閉包都維持著對外部作用域的引用。閉包中會將外部函數(shù)的自由對象添加到自己的作用域鏈中，所以可以通過內(nèi)部函數(shù)訪問外部函數(shù)的屬性，這也是javascript模擬私有變量的一種方式。

由于作用域鏈機(jī)制的影響，閉包只能取得內(nèi)部函數(shù)的最后一個值，這引起的一個副作用就是如果內(nèi)部函數(shù)在一個循環(huán)中，那么變量的值始終為最后一個值。

這個代碼已經(jīng)貼過了，怕你們忘記，就再貼一遍

var data = [];

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

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

如果要強(qiáng)制返回預(yù)期的結(jié)果，怎么辦？？？

方法1：立即執(zhí)行函數(shù)

for (var i = 0; i < 3; i++) {
    (function(num) {
        setTimeout(function() {
            console.log(num);
        }, 1000);
    })(i);
}
// 0
// 1
// 2

方法2：返回一個匿名函數(shù)賦值

var data = [];

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

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

無論是立即執(zhí)行函數(shù)還是返回一個匿名函數(shù)賦值，原理上都是因為變量的按值傳遞，所以會將變量i的值復(fù)制給實(shí)參num，在匿名函數(shù)的內(nèi)部又創(chuàng)建了一個用于訪問num的匿名函數(shù)，這樣每個函數(shù)都有了一個num的副本，互不影響了。

方法3：使用ES6中的let

var data = [];

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

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

解釋下原理：

var data = [];// 創(chuàng)建一個數(shù)組data;

// 進(jìn)入第一次循環(huán)
{ 
    let i = 0; // 注意：因為使用let使得for循環(huán)為塊級作用域
               // 此次 let i = 0 在這個塊級作用域中，而不是在全局環(huán)境中
    data[0] = function() {
        console.log(i);
    };
}

循環(huán)時，let聲明i,所以整個塊是塊級作用域，那么data[0]這個函數(shù)就成了一個閉包。這里用｛｝表達(dá)并不符合語法，只是希望通過它來說明let存在時，這個for循環(huán)塊是塊級作用域，而不是全局作用域。

上面的塊級作用域，就像函數(shù)作用域一樣，函數(shù)執(zhí)行完畢，其中的變量會被銷毀，但是因為這個代碼塊中存在一個閉包，閉包的作用域鏈中引用著塊級作用域，所以在閉包被調(diào)用之前，這個塊級作用域內(nèi)部的變量不會被銷毀。

// 進(jìn)入第二次循環(huán)
{ 
    let i = 1; // 因為 let i = 1 和上面的 let i = 0     
               // 在不同的作用域中，所以不會相互影響
    data[1] = function(){
         console.log(i);
    }; 
}

當(dāng)執(zhí)行data[1]()時，進(jìn)入下面的執(zhí)行環(huán)境。

{ 
     let i = 1; 
     data[1] = function(){
          console.log(i);
     }; 
}

在上面這個執(zhí)行環(huán)境中，它會首先尋找該執(zhí)行環(huán)境中是否存在i，沒有找到，就沿著作用域鏈繼續(xù)向上到了其所在的塊作用域執(zhí)行環(huán)境，找到了i = 1,于是輸出了1。

代碼1：

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

var foo = checkscope(); 
foo();                    

代碼2：

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

checkscope();  

上面的兩個代碼中，checkscope()執(zhí)行完成后，閉包f所引用的自由變量scope會被垃圾回收嗎？為什么？

深入javascript——作用域和閉包
ES6之let（理解閉包）和const命令

【進(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期】深入淺出圖解作用域鏈和閉包

【進(jìn)階2-2期】JavaScript深入之從作用域鏈理解閉包

每周面試重難點(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ù)[加群]即可