摘要：進擊的巨人第三篇，本篇就作用域作用域鏈閉包等知識點，一一擊破。在此我們遵照的方式，暫且稱是閉包。所以，一名合格的前端，除了會用閉包，還要正確的解除閉包引用。

進擊的巨人第三篇，本篇就作用域、作用域鏈、閉包等知識點，一一擊破。

作用域：負責收集并維護由所有聲明的標識符（變量）組成的一系列查詢，并實施一套非常嚴格的規(guī)則，確定當前執(zhí)行的代碼對這些標識符（變量）的訪問權(quán)限
——《你不知道的JavaScript上卷》

作用域有點像圈地盤，大家劃好區(qū)域，然后各自經(jīng)營管理，井水不犯河水。

var globaValue = "我是全局作用域";
function foo() {
    var fooValue = "我是foo作用域";
    function bar() {
        var barValue = "我是bar作用域";
    }
}

function other() {
    var otherValue = "我是other作用域";
}

不同作用域下命名相同的變量不會發(fā)生沖突，"就近原則"選取。

var name = "任何名字";
function getName() {
    var name = "以樂之名";
    console.log(name);    // "以樂之名"
}
console.log(name);        // "任何名字"

執(zhí)行上下文環(huán)境有：全局、函數(shù)、eval。那么作用域也有三種，ES6新增了塊級作用域。

全局作用域

函數(shù)作用域

eval作用域（不推薦使用eval，暫時忽略）

塊級作用域（ES6新增）

JavaScript中全局環(huán)境只有一個，對應(yīng)的全局作用域也只有一個。局部環(huán)境沒有使用var/let/const聲明的變量默認都會成為全局變量。

function foo() {
    a = 10;
};
foo();
console.log(a);    // 10 變?nèi)肿兞浚ㄒ馔庥纱税l(fā)生）

ES6之前，想要實現(xiàn)局部作用域的方式，都是是通過在函數(shù)中聲明變量來實現(xiàn)的，所以也稱函數(shù)作用域，支持嵌套多個。

var a = 20;
function foo() {
    var a = 10;
    console.log(a);    // 10;
}
foo();

函數(shù)中聲明變量時，建議在函數(shù)起始部分聲明所有變量，方便查看，切記要用var/let/const聲明，防止手抖將局部變量變成全局變量。

function getClient() {
    var name;
    var phone;
    var sex;
}

我們先來理解什么是塊？所謂塊，其實就是被大括號{}包裹的代碼部分。

if (true) {
    // 這里就是塊了，也可稱代碼塊
}

ES6前沒有塊級作用域的概念，所以{}中并沒有自己的作用域。如果我們想在ES5的環(huán)境下構(gòu)建塊級作用域，一般都是是通過立即執(zhí)行函數(shù)來實現(xiàn)的。

var name = "任何名字";
(function(window) {
    var name = "以樂之名";
    console.log(name);    // "以樂之名"
}(window));
console.log(name);        // "任何名字"

ES5借助函數(shù)作用域來實現(xiàn)塊級作用域的方式，會讓我們的代碼充斥大量的立即執(zhí)行函數(shù)(IIFE)，不便于代碼的閱讀。好的代碼的就跟好的文章一樣，讓閱讀者讀起來舒暢明了。

為此，ES6新增塊級作用域的概念，使用let/const聲明變量的方式，即可將其作用域指定在代碼塊中，跟函數(shù)作用域一樣支持嵌套。

let i = 0;
for (let i = 0; i < 10; i++){
????console.log(i);
}
i;    // 0

let/const不允許變量提升，必須"先聲明再使用"。這種限制，稱為"暫時性死區(qū)"。這也能讓我們在代碼編寫階段變得更加規(guī)范化，執(zhí)行跟書寫順序保持一致。

變量被作用域所管理，那么變量在作用域中的查找規(guī)則，就是所謂的作用域鏈。

作用域鏈的用途，是保證對執(zhí)行環(huán)境有權(quán)訪問的所有變量和函數(shù)的有序訪問
——《JavaScript高級程序設(shè)計》

"在當前執(zhí)行環(huán)境開始查找使用到的變量，如果找到，則返回其值。如果找不到，會逐層往上級（父作用域）查找，直到全局作用域"。

var money = 100;
function foo() {
    function bar() {
        console.log(money);
    }
    bar();
}
foo();

變量我們見的不少，但"自由變量"聽著是不是挺唬人的。其實對它，我們并不陌生。

"自由變量：當前執(zhí)行環(huán)境使用到，但并未在當前執(zhí)行環(huán)境聲明的變量（函數(shù)參數(shù)arguments排除）"

函數(shù)調(diào)用時，進入執(zhí)行上下文創(chuàng)建階段，會對arguments進行隱式的變量聲明。

var outer = "我是外面變量";
function foo() {
    var inner = "我是里面變量，不是自由變量";
    console.log(outer);   
    // 這里用到了outer，但outer并不在函數(shù)foo中聲明，所以outer就是foo中的自由變量
}

"自由變量的作用域由詞法環(huán)境決定，也就是它的作用域在代碼書寫階段就已經(jīng)確定了，而不是在代碼執(zhí)行階段確定。"

"自由變量的值是在代碼執(zhí)行時確定的，變量變量變量，值肯定要變，所以自由變量的值只有在程序運行階段才能確定。"

開篇第一文我們就執(zhí)行環(huán)境，執(zhí)行棧做出了詳解，有所遺忘的可再溫習(xí)。執(zhí)行棧是我們理解閉包原理基礎(chǔ)中的基礎(chǔ)。

函數(shù)調(diào)用棧過程的圖再曬出來，順便溫習(xí)下。

function foo () {
    function bar () {
        return "I am bar";
    }
    return bar();
}
foo();

函數(shù)調(diào)用時入棧，調(diào)用結(jié)束出棧。執(zhí)行函數(shù)時，會創(chuàng)建一個變量對象去存儲函數(shù)中的變量，方法，參數(shù)arguments等，結(jié)束調(diào)用時，該變量對象就會被銷毀。(理想的情況下，不理想的情況就是出現(xiàn)"閉包"調(diào)用了)。

閉包是指有權(quán)訪問另外一個函數(shù)作用域的變量的函數(shù)。
——《JavaScript高級程序設(shè)計》
閉包是指那些能夠訪問自由變量的函數(shù)。
——MDN

閉包的特點首先是函數(shù)，其次是它可以訪問到父級作用域的變量對象，即使父級函數(shù)完成調(diào)用后"理應(yīng)出棧銷毀"。

函數(shù)作為參數(shù)傳遞

函數(shù)作為返回值傳遞

function foo() {
    var fooVal = "2019";
    var bar = function() {
        console.log(fooVal);    // bar中使用到了自由變量fooVal
    }
    return bar;                 // 函數(shù)作為參數(shù)返回
}

var getValue = foo();
getValue();                     // 2019

對函數(shù)中誰是閉包，各文檔解釋不一。在此我們遵照Chrome的方式，暫且稱foo是閉包。

因為作用域和作用域鏈規(guī)則的限定，子環(huán)境的自由變量只能逐層向上到父環(huán)境查找。

但是通過閉包，我們在外部環(huán)境也可以獲取到變量fooVal，雖然foo()函數(shù)執(zhí)行完成了，但它并沒從函數(shù)調(diào)用棧中銷毀，其變量對象存儲仍然能被訪問到。

實際執(zhí)行過程請看圖：

把上述代碼改以下，接著看：

function foo() {
 var fooVal = "2019";
 var bar = function() {
 console.log(fooVal);     // bar中使用到了自由變量fooVal
 }
 return bar;              // 函數(shù)作為參數(shù)返回
}
var getValue = foo();
var fooVal = "2018";      // 這里的fooVal是全局作用域的變量
getValue();               // 2019

答案與結(jié)果不符的小伙伴要回頭理解下自由變量了。"自由變量的作用域在代碼書寫時（函數(shù)創(chuàng)建時）就確定了"，所以函數(shù)中getValue()使用的fooVal在foo的作用域下，而不是在全局作用域下。

答對的小伙伴們再來一道題，加深你的記憶

function fn() {
    var max = 10;
    function bar(x) {
        if (x > max) {    
            console.log(x)
        }
    }
    return bar;
}
var f1 = fn();
var max = 100;

f1(20);    // 輸出20

題目解析：max作為函數(shù)bar中的自由變量，它的作用域在函數(shù)bar創(chuàng)建的時候就確定了，就是函數(shù)fn中的max，所以它的作用域鏈查找到fn中已經(jīng)結(jié)束并返回了，不會再向上找到全局作用域。

注意：棧中存儲的不只是閉包中使用到的自由變量，而是父級函數(shù)的整個變量對象（父級函數(shù)作用域中聲明的方法，變量，參數(shù)等）

上文中已經(jīng)闡述了閉包的特點，就是能夠讓我們跨作用域取值（不局限于父子作用域）。列舉兩個實際開發(fā)中常用的栗子：

封裝回調(diào)保存作用域

for(var i = 1; i < 5; i++) {
    setTimeout((function(i){
       return function() {
           console.log(i);        
       } 
    })(i), i * 1000)
}
// 原理：通過自執(zhí)行函數(shù)傳參i，然后返回一個函數(shù)（閉包）中使用i，使父函數(shù)的變量對象一直存在

私有變量和方法實現(xiàn)模塊化

var makePeople = function () {
    var _name = "以樂之名";
    return {
        getName: function () {
            console.log(_name);
        },
        setName: function (name) {
            if (name != "Hello world") {
                _name = name;
            }
        }
    }
}

var me = makePeople();
me.getName();                   // "以樂之名"
me.setName("KenTsang");         
me.getName();                   // "KenTsang"

// 原理：私有變量_name沒有對外訪問權(quán)限，但通過閉包使其一直保留在內(nèi)存中，可以被外部調(diào)用

閉包的應(yīng)用場景還有很多，具體實際情況還需具體分析。

閉包的使用，破壞了函數(shù)的出棧過程。解釋執(zhí)行棧的時候，講到同個函數(shù)即使調(diào)用自身，創(chuàng)建的變量對象也并非同一個，其內(nèi)存存儲是各自獨立的。

棧中只入不出，函數(shù)的變量對象沒有被有效回收，就會造成瀏覽器內(nèi)存占用逐步增加，內(nèi)存占用過高的情況下，就會導(dǎo)致頁面卡頓，甚至瀏覽器崩潰。這就是我們常說閉包過度使用造成的"內(nèi)存泄露"。

所以，一名合格的前端，除了會用閉包，還要正確的解除閉包引用。
垃圾回收機制講解時，通過設(shè)置變量值為null時可以解除變量的引用，以便下一次垃圾回收銷毀它。

function foo() {
 var fooVal = "2019";
 var bar = function() {
 console.log(fooVal);     
 }
 return bar;              
}
var getValue = foo();
var fooVal = "2018";     
getValue();
getValue = null;         // 解除引用，下一次垃圾回收就會回收了

閉包算是前端初學(xué)者的一個難點，能解釋清楚并不容易，涉及到作用域，執(zhí)行上下文環(huán)境、變量對象等等。

零散知識的內(nèi)聚匯總，正是是系列更文的初衷所在。

知識不是小段子，聽完笑過就忘，唯有形成體系，達成閉環(huán)，才能深植入記憶中。

參考文檔：

深入理解javascript原型和閉包

本文首發(fā)Github，期待Star！
https://github.com/ZengLingYong/blog

作者：以樂之名
本文原創(chuàng)，有不當?shù)牡胤綒g迎指出。轉(zhuǎn)載請指明出處。