摘要：系列目錄復(fù)習(xí)資料資料整理個(gè)人整理重溫基礎(chǔ)篇重溫基礎(chǔ)對(duì)象介紹重溫基礎(chǔ)對(duì)象介紹重溫基礎(chǔ)介紹重溫基礎(chǔ)相等性判斷本章節(jié)復(fù)習(xí)的是中的關(guān)于閉包，這個(gè)小哥哥呀，看看。這里隨著閉包函數(shù)的結(jié)束，執(zhí)行環(huán)境銷毀，變量回收。

本文是 重溫基礎(chǔ) 系列文章的第十九篇。
今日感受：將混亂的事情找出之間的聯(lián)系，也是種能力。

系列目錄：

【復(fù)習(xí)資料】ES6/ES7/ES8/ES9資料整理(個(gè)人整理)

【重溫基礎(chǔ)】1-14篇

【重溫基礎(chǔ)】15.JS對(duì)象介紹

【重溫基礎(chǔ)】16.JSON對(duì)象介紹

【重溫基礎(chǔ)】17.WebAPI介紹

【重溫基礎(chǔ)】18.相等性判斷

本章節(jié)復(fù)習(xí)的是JS中的關(guān)于閉包，這個(gè)小哥哥呀，看看。

前置知識(shí)：
聲明函數(shù)兩種方法：

函數(shù)聲明，存在函數(shù)聲明提升，因此可以在函數(shù)聲明之前調(diào)用（不會(huì)報(bào)錯(cuò)）。

fun();  // ok
function fun(){};

函數(shù)表達(dá)式，不存在函數(shù)聲明提升，若定義前調(diào)用，會(huì)報(bào)錯(cuò)（函數(shù)還不存在）。

fun();  // error
var fun = function (){};

這里先要了解一個(gè)概念，詞法作用域：它是靜態(tài)的作用域，是書寫變量和塊作用域的作用域**。

function f (){
    var a = "leo";
    function g(){console.log(a)};
    g();
}
f(); // "leo"

由于函數(shù)g的作用域中沒有a這個(gè)變量，但是它可以訪問(wèn)父作用域，并使用父作用域下的變量a，最后輸出"leo"。

詞法作用域中使用的域，是變量在代碼中聲明的位置所決定的。嵌套的函數(shù)可以訪問(wèn)在其外部聲明的變量。

接下來(lái)介紹下閉包概念，閉包是指有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域中的變量的函數(shù)。

閉包是由函數(shù)以及創(chuàng)建該函數(shù)的詞法環(huán)境組合而成。這個(gè)環(huán)境包含了這個(gè)閉包創(chuàng)建時(shí)所能訪問(wèn)的所有局部變量。

創(chuàng)建閉包的常見方式：在一個(gè)函數(shù)內(nèi)創(chuàng)建另一個(gè)函數(shù)。如：

function f (){
    var a = "leo";
    var g = function (){
        console.log(a);
    };
    return g;// 這里g就是一個(gè)閉包函數(shù)，可以訪問(wèn)到g作用域的變量a
}
var fun = f();
fun(); // "leo"

通過(guò)概念可以看出，閉包有以下三個(gè)特征：

函數(shù)嵌套函數(shù)

函數(shù)內(nèi)部可以引用函數(shù)外部的參數(shù)和變量

參數(shù)和變量不會(huì)被垃圾回收機(jī)制回收

注：關(guān)于內(nèi)存回收機(jī)制，可以查看阮一峰老師的《JavaScript 內(nèi)存泄漏教程》。

另外，使用閉包有以下好處：

將一個(gè)變量長(zhǎng)期保存在內(nèi)存中

避免全局變量的污染

function f (){
    var a = 1; 
    return function(){
        a++;
        console.log(a);
    }
}
var fun = f();
fun(); // 2
fun(); // 3

因?yàn)槔厥諜C(jī)制沒有回收，所以每次調(diào)用fun()都會(huì)返回新的值。

私有化成員，使得外部不能訪問(wèn)

function f (){
    var a = 1;
    function f1 (){
        a++;
        console.log(a);
    };
    function f2 (){
        a++;
        console.log(a);
    };
    return {g1:f1, g2:f2};
};
var fun = f();
fun.g1(); // 2
fun.g2(); // 3

function f (){
    var a = [];
    for(var i = 0; i<10; i++){
        a[i] = function(){
            console.log(i);
        }
    }
    return a;
}
var fun = f();
fun[0]();  // 10
fun[1]();  // 10
// ...
fun[10]();  // 10

原本照我們的想法，fun方法中每個(gè)元素上的方法執(zhí)行的結(jié)果應(yīng)該是1,2,3,...,10，而實(shí)際上，每個(gè)返回都是10，因?yàn)槊總€(gè)閉包函數(shù)引用的變量i是f執(zhí)行環(huán)境下的變量i，循環(huán)結(jié)束后，i已經(jīng)變成10，所以都會(huì)返回10。
解決辦法可以這樣：

function f (){
    var a = [];
    for(var i = 0; i<10; i++){
        a[i] = function(index){
            return function(){
                console.log(index);
                // 此時(shí)的index，是父函數(shù)作用域的index，
                // 數(shù)組的10個(gè)函數(shù)對(duì)象，每個(gè)對(duì)象的執(zhí)行環(huán)境下的index都不同
            }
        }(i);
    };
    return a;
};
var fun = f();
fun[0]();  // 0
fun[1]();  // 1
// ...
fun[10]();  // 10

var obj = {
    name : "leo", 
    f : function(){
        return function(){
            console.log(this.name);
        }
    }
}
obj.f()();  // undefined

由于里面的閉包函數(shù)是在window作用域下執(zhí)行，因此this指向window。

當(dāng)我們?cè)陂]包內(nèi)引用父作用域的變量，會(huì)使得變量無(wú)法被回收。

function f (){
    var a = document.getElementById("leo");
    a.onclick = function(){console.log(a.id)};
}

這樣做的話，變量a會(huì)一直存在無(wú)法釋放，類似的變量越來(lái)越多的話，很容易引起內(nèi)存泄漏。我們可以這么解決：

function f (){
    var a = document.getElementById("leo");
    var id = a.id;
    a.onclick = function(){};
    a = null;  //主動(dòng)釋放變量a
}

通過(guò)把變量賦值成null來(lái)主動(dòng)釋放掉。

代碼如下：

for(var i = 0 ; i<10; i++){
    setTimeout(function(){
        console.log(i);
    },100);
}

不出所料，返回的不是我們想要的0,1,2,3,...,9，而是10個(gè)10。
這是因?yàn)閖s是單進(jìn)程，所以在執(zhí)行for循環(huán)的時(shí)候定時(shí)器setTimeout被安排到任務(wù)隊(duì)列中排隊(duì)等候執(zhí)行，而在等待過(guò)程中，for循環(huán)已經(jīng)在執(zhí)行，等到setTimeout要執(zhí)行的時(shí)候，for循環(huán)已經(jīng)執(zhí)行完成，i的值就是10，所以就打印了10個(gè)10。
解決方法 ：

1.使用ES6新增的let。

把for循環(huán)中的var替換成let。

2.使用閉包

for(var i = 0; i<10 ; i++){
    (function(i){
        setTimeout(function(){
            console.log(i);
        }, i*100);
    })(i);
}

function f(num){
    return num >1 ? num*f(num-1) : 1;
}

var fun = f;
f = null;
fun(4)   // 報(bào)錯(cuò) ，因?yàn)樽詈檬莚eturn num* arguments.callee（num-1），arguments.callee指向當(dāng)前執(zhí)行函數(shù)，但是在嚴(yán)格模式下不能使用該屬性也會(huì)報(bào)錯(cuò)，所以借助閉包來(lái)實(shí)現(xiàn)

這里可以使用return num >1 ? num* arguments.callee(num-1) : 1;，因?yàn)?b>arguments.callee指向當(dāng)前執(zhí)行函數(shù)，但是在嚴(yán)格模式下不能使用，也會(huì)報(bào)錯(cuò)，所以這里需要使用閉包來(lái)實(shí)現(xiàn)。

function fun = (function f(num){
    return num >1 ? num*f(num-1) : 1;
})

這樣做，實(shí)際上起作用的是閉包函數(shù)f，而不是外面的fun。

ES6之前，使用var聲明變量會(huì)有變量提升問(wèn)題：

for(var i = 0 ; i<10; i++){console.log(i)};
console.log(i);  // 變量提升 返回10

為了避免這個(gè)問(wèn)題，我們這樣使用閉包（匿名自執(zhí)行函數(shù)）：

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

我們創(chuàng)建了一個(gè)匿名的函數(shù)，并立即執(zhí)行它，由于外部無(wú)法引用它內(nèi)部的變量，因此在函數(shù)執(zhí)行完后會(huì)立刻釋放資源，關(guān)鍵是不污染全局對(duì)象。這里i隨著閉包函數(shù)的結(jié)束，執(zhí)行環(huán)境銷毀，變量回收。
但是現(xiàn)在，我們用的更多的是ES6規(guī)范的let和const來(lái)聲明。

MDN 閉包

《JavaScript高級(jí)程序設(shè)計(jì)》

本部分內(nèi)容到這結(jié)束

歡迎關(guān)注微信公眾號(hào)【前端自習(xí)課】每天早晨，與您一起學(xué)習(xí)一篇優(yōu)秀的前端技術(shù)博文 .