前端進擊的巨人（三）：從做用域走進閉包

時間 2019-11-06

標籤前端進擊巨人走進閉包简体版

原文原文鏈接

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

做用域

做用域：負責收集並維護由全部聲明的標識符（變量）組成的一系列查詢，並實施一套很是嚴格的規則，肯定當前執行的代碼對這些標識符（變量）的訪問權限
——《你不知道的JavaScript上卷》html

做用域有點像圈地盤，你們劃好區域，而後各自經營管理，井水不犯河水。前端

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

function other() {
    var otherValue = '我是other做用域';
}

做用域的變量聲明

不一樣做用域下命名相同的變量不會發生衝突，"就近原則"選取。java

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

做用域的類型

執行上下文環境有：全局、函數、eval。那麼做用域也有三種，ES6新增了塊級做用域。git

全局做用域
函數做用域
eval做用域（不推薦使用eval，暫時忽略）
塊級做用域（ES6新增）

全局做用域

JavaScript中全局環境只有一個，對應的全局做用域也只有一個。局部環境沒有使用var/let/const聲明的變量默認都會成爲全局變量。github

function foo() {
    a = 10;
};
foo();
console.log(a);    // 10 變全局變量（意外由此發生）

函數做用域

ES6以前，想要實現局部做用域的方式，都是是經過在函數中聲明變量來實現的，因此也稱函數做用域，支持嵌套多個。瀏覽器

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

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

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

塊級做用域

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

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

ES6前沒有塊級做用域的概念，因此{}中並無本身的做用域。若是咱們想在ES5的環境下構建塊級做用域，通常都是是經過當即執行函數來實現的。函數

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

ES5藉助函數做用域來實現塊級做用域的方式，會讓咱們的代碼充斥大量的當即執行函數(IIFE)，不便於代碼的閱讀。好的代碼的就跟好的文章同樣，讓閱讀者讀起來舒暢明瞭。

爲此，ES6新增塊級做用域的概念，使用let/const聲明變量的方式，便可將其做用域指定在代碼塊中，跟函數做用域同樣支持嵌套。

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

let/const不容許變量提高，必須"先聲明再使用"。這種限制，稱爲"暫時性死區"。這也能讓咱們在代碼編寫階段變得更加規範化，執行跟書寫順序保持一致。

做用域鏈（變量查詢規則）

變量被做用域所管理，那麼變量在做用域中的查找規則，就是所謂的做用域鏈。

做用域鏈的用途，是保證對執行環境有權訪問的全部變量和函數的有序訪問
——《JavaScript高級程序設計》

"在當前執行環境開始查找使用到的變量，若是找到，則返回其值。若是找不到，會逐層往上級（父做用域）查找，直到全局做用域"。

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

自由變量

變量咱們見的很多，但"自由變量"聽着是否是挺唬人的。其實對它，咱們並不陌生。

"自由變量：當前執行環境使用到，但並未在當前執行環境聲明的變量（函數參數arguments排除）"

函數調用時，進入執行上下文建立階段，會對arguments進行隱式的變量聲明。

var outer = '我是外面變量';
function foo() {
    var inner = '我是裏面變量，不是自由變量';
    console.log(outer);   
    // 這裏用到了outer，但outer並不在函數foo中聲明，因此outer就是foo中的自由變量
}

"自由變量的做用域由詞法環境決定，也就是它的做用域在代碼書寫階段就已經肯定了，而不是在代碼執行階段肯定。"

"自由變量的值是在代碼執行時肯定的，變量變量變量，值確定要變，因此自由變量的值只有在程序運行階段才能肯定。"

閉包

開篇第一文咱們就執行環境，執行棧作出了詳解，有所遺忘的可再溫習。執行棧是咱們理解閉包原理基礎中的基礎。

函數調用棧過程的圖再曬出來，順便溫習下。

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

函數調用時入棧，調用結束出棧。執行函數時，會建立一個變量對象去存儲函數中的變量，方法，參數arguments等，結束調用時，該變量對象就會被銷燬。(理想的狀況下，不理想的狀況就是出現"閉包"調用了)。

什麼是閉包？

閉包是指有權訪問另一個函數做用域的變量的函數。
——《JavaScript高級程序設計》

閉包是指那些可以訪問自由變量的函數。

——MDN

閉包的特色首先是函數，其次是它能夠訪問到父級做用域的變量對象，即便父級函數完成調用後"理應出棧銷燬"。

斷定閉包出現

函數做爲參數傳遞
函數做爲返回值傳遞

function foo() {
    var fooVal = '2019';
    var bar = function() {
        console.log(fooVal);    // bar中使用到了自由變量fooVal
    }
    return bar;                 // 函數做爲參數返回
}

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

對函數中誰是閉包，各文檔解釋不一。在此咱們遵守Chrome的方式，暫且稱foo是閉包。

由於做用域和做用域鏈規則的限定，子環境的自由變量只能逐層向上到父環境查找。

可是經過閉包，咱們在外部環境也能夠獲取到變量fooVal，雖然foo()函數執行完成了，但它並沒從函數調用棧中銷燬，其變量對象存儲仍然能被訪問到。

實際執行過程請看圖：

把上述代碼改如下，接着看：

function foo() {
 var fooVal = '2019';
 var bar = function() {
 console.log(fooVal);     // bar中使用到了自由變量fooVal
 }
 return bar;              // 函數做爲參數返回
}
var getValue = foo();
var fooVal = '2018';      // 這裏的fooVal是全局做用域的變量
getValue();               // 2019

答案與結果不符的小夥伴要回頭理解下自由變量了。"自由變量的做用域在代碼書寫時（函數建立時）就肯定了"，因此函數中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做爲函數bar中的自由變量，它的做用域在函數bar建立的時候就肯定了，就是函數fn中的max，因此它的做用域鏈查找到fn中已經結束並返回了，不會再向上找到全局做用域。

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

閉包的應用場景

上文中已經闡述了閉包的特色，就是可以讓咱們跨做用域取值（不侷限於父子做用域）。列舉兩個實際開發中經常使用的栗子：

封裝回調保存做用域

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

私有變量和方法實現模塊化

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沒有對外訪問權限，但經過閉包使其一直保留在內存中，能夠被外部調用

閉包的應用場景還有不少，具體實際狀況還需具體分析。

閉包形成的內存泄露

閉包的使用，破壞了函數的出棧過程。解釋執行棧的時候，講到同個函數即便調用自身，建立的變量對象也並不是同一個，其內存存儲是各自獨立的。

棧中只入不出，函數的變量對象沒有被有效回收，就會形成瀏覽器內存佔用逐步增長，內存佔用太高的狀況下，就會致使頁面卡頓，甚至瀏覽器崩潰。這就是咱們常說閉包過分使用形成的"內存泄露"。

因此，一名合格的前端，除了會用閉包，還要正確的解除閉包引用。
垃圾回收機制講解時，經過設置變量值爲null時能夠解除變量的引用，以便下一次垃圾回收銷燬它。

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