簡(jiǎn)單而清楚地理解閉包

SimonMa 發(fā)布于2019-08-23 14:43 / 2924人閱讀

摘要：大多數(shù)非閉包的情況下，函數(shù)的外部函數(shù)即全局變量函數(shù)被調(diào)用時(shí)，也會(huì)創(chuàng)建一條作用域鏈下稱鏈，并將鏈的內(nèi)容包含到鏈中，然后將當(dāng)前函數(shù)的活動(dòng)對(duì)象可以簡(jiǎn)單理解為所有的內(nèi)部變量添加到鏈條的頂端。

什么是閉包？
“閉包是指有權(quán)訪問另一個(gè)函數(shù)作用域中的變量的函數(shù)。”---《JavaScript高級(jí)程序設(shè)計(jì)》
通常來說，當(dāng)一個(gè)函數(shù)可以訪問另一個(gè)函數(shù)內(nèi)部定義的變量(包括屬性和方法)時(shí)，這個(gè)函數(shù)可以稱之為閉包：

function fnA(){
    var a = "this is fnA.a";
    return function fnB(){
        alert(a);
    }
}

var x = fnA();
x(); // "this is fnA.a"

例子中，我們可以通過x(即fnB)去訪問fnA中的內(nèi)部變量(a)，此時(shí)我們可以稱fnB為閉包。

閉包是如何產(chǎn)生的？
為了更清楚的解釋閉包的發(fā)生，我們需要先明白“函數(shù)的創(chuàng)建”到“函數(shù)的調(diào)用”到底發(fā)生了什么事情。

1、函數(shù)被創(chuàng)建時(shí)，會(huì)創(chuàng)建一條作用域鏈(下稱A鏈)。然后根據(jù)跟創(chuàng)建時(shí)的環(huán)境，依照“外部函數(shù)”、“‘外部函數(shù)’的外部函數(shù)”、“‘外部函數(shù)的外部函數(shù)’的外部函數(shù)”....“全局函數(shù)”順序，將所有函數(shù)的活動(dòng)對(duì)象(可以簡(jiǎn)單理解為所有的內(nèi)部變量)添加到這條作用域鏈上。（大多數(shù)非閉包的情況下，函數(shù)的外部函數(shù)即全局變量）
2、函數(shù)被調(diào)用時(shí)，也會(huì)創(chuàng)建一條作用域鏈(下稱B鏈)，并將A鏈的內(nèi)容包含到B鏈中，然后將當(dāng)前函數(shù)的活動(dòng)對(duì)象(可以簡(jiǎn)單理解為所有的內(nèi)部變量)添加到B鏈條的頂端。
3、當(dāng)訪問函數(shù)內(nèi)部變量時(shí)，會(huì)按照B鏈中的變量保存的順序依次訪問。即內(nèi)部變量，(創(chuàng)建時(shí)的)外部函數(shù)的變量，(創(chuàng)建時(shí)的)外部函數(shù)的外部函數(shù)的變量...全局變量。

下面是一道經(jīng)典的閉包題：

function fun(n,o) {
    console.log(o)
    return {
    fun:function(m){
        return fun(m,n);
        }
    };
}

var a = fun(0); // undefined。由于會(huì)“o”未賦值，所以會(huì)顯示：undefined。同時(shí)返回一個(gè)字面量對(duì)象，對(duì)象內(nèi)創(chuàng)建一個(gè)名為“fun”的函數(shù)，并將對(duì)象返回賦值給全局變量a。此時(shí)a內(nèi)部的函數(shù)fun已經(jīng)被創(chuàng)建好了，它的作用域鏈上包含了外部函數(shù)(外層的fun函數(shù))的所有變量，其中包含了n(值為0)，o(值為undefined)；以及全局函數(shù)的變量fun(值得注意的是，這個(gè)fun屬于全局函數(shù)的變量)。
a.fun(1); // 0。上面提到。在創(chuàng)建a的內(nèi)部fun時(shí)，它包含的作用域鏈中包含了n(值為0)，o(值為undefined)；以及全局函數(shù)的變量fun。因此，我們調(diào)用(訪問)的“fun”是作用域鏈中給全局函數(shù)的函數(shù)fun。m=1，n=0，將其賦值給全局函數(shù)的函數(shù)fun，即：n=(m=)1，o=(n=)0，打印0，值為“0”。
a.fun(2); // 0
a.fun(3); // 0。這里有個(gè)“坑”需要注意。在上個(gè)步驟“a.fun(1);”中，最后會(huì)創(chuàng)建一個(gè)對(duì)象(fun函數(shù)作用域鏈中的n值為1，o值為0)并返回。但是并沒有變量來接收這個(gè)對(duì)象，更不會(huì)影響到a內(nèi)部作用域鏈。因此“a.fun(2);”、“a.fun(3);”中，作用域鏈上的值與“a.fun(1);”中完全一樣。


var b = fun(0).fun(1).fun(2).fun(3); // undefined，0，1，2
//這是一條鏈?zhǔn)秸{(diào)用。為了便于理解，我們將鏈?zhǔn)秸{(diào)用拆分以下等價(jià)的方案：
var b1 = fun(0); // undefined。這個(gè)和“ var a = fun(0);”，不重復(fù)解釋。
var b2 = b1.fun(1); // 0。這里和“a.fun(1);”一樣，不重復(fù)解釋。但是要注意的是，此時(shí)有個(gè)變量b2接收了b1.fun返回的變量。此時(shí)，b2中的函數(shù)fun的作用域鏈的(部分)內(nèi)容情況：n=1，o=0。
var b3 = b2.fun(2); // 1。“var b2 = b1.fun(1);”中，b2中函數(shù)fun的作用域鏈中的n為1，o為0。調(diào)用全局函數(shù)的fun時(shí)，n=(m=)2，o=(n=)1。因此打印內(nèi)容為“1”。
var b4 = b3.fun(3); // 2。理由同上。


var c = fun(0).fun(1); // undefined，0
c.fun(2);// 1
c.fun(3);// 1

//為了便于理解，我們將鏈?zhǔn)秸{(diào)用拆分以下等價(jià)的方案進(jìn)行解釋：
var c1 = fun(0); // undefined。這個(gè)和“ var a = fun(0);”，不重復(fù)解釋。
var c = c1.fun(1); // 0。要注意的是，“ c1.fun(1); ”返回的對(duì)象由變量c接收，即c中的函數(shù)fun作用域鏈中的變量：n=1，o=0。
c.fun(2);// 1。
c.fun(3);// 1。“ c.fun(2);”中返回的對(duì)象不會(huì)影響到c。因此此處和執(zhí)行“c.fun(2);”時(shí)一樣，c中的函數(shù)fun作用域鏈并未被改變。

我們可以簡(jiǎn)單理解為：函數(shù)創(chuàng)建時(shí)，就已經(jīng)根據(jù)上下文環(huán)境保存一套所有外部函數(shù)(不包含自身內(nèi)部)的變量。當(dāng)我們?cè)谡{(diào)用閉包函數(shù)時(shí)，閉包函數(shù)自身不存在的變量，將會(huì)在這套變量中查找。

值得一提
1、“變量聲明提升”對(duì)于閉包的實(shí)現(xiàn)是非常重要的。如果變量聲明沒有被提升，那么我們將無法保存那些在閉包函數(shù)創(chuàng)建以后才聲明的變量。
2、閉包的機(jī)制，作用域鏈會(huì)一直引用自身以外的函數(shù)的全部變量，內(nèi)存回收機(jī)制不能及時(shí)回收這些變量，從而增大內(nèi)存開銷。