閉包的理解

oliverhuang 發(fā)布于2019-08-20 18:34 / 2196人閱讀

摘要：什么是閉包在維基百科上對(duì)與閉包的理解是這樣的閉包是引用了自由變量的函數(shù)。則這些規(guī)則也是閉包的一部分。和函數(shù)具有涵蓋模塊實(shí)例內(nèi)部作用域的閉包，當(dāng)通過(guò)返回一個(gè)含有屬性引用的對(duì)象方式來(lái)講函數(shù)傳遞到詞法作用域外部時(shí)，就創(chuàng)造了觀察閉包的條件

什么是閉包

在維基百科上對(duì)與閉包的理解是這樣的：閉包是引用了自由變量的函數(shù)。這個(gè)被引用的自由變量將和這個(gè)函數(shù)一同存在，即使已經(jīng)離開(kāi)了創(chuàng)造它的環(huán)境也不例外。
在JavaScript中，我們可以這樣理解：當(dāng)函數(shù)可以記住并訪問(wèn)所在的詞法作用域，即使函數(shù)是在當(dāng)前的函數(shù)詞法作用域之外執(zhí)行，這是就產(chǎn)生了閉包

閉包的原理

要想理解閉包，首先要知道作用域的概念

理解作用域

作用域是根據(jù)名稱查找變量的一套規(guī)則，例如

var a = 2

這個(gè)聲明，會(huì)有兩個(gè)過(guò)程，首先編譯時(shí)，編譯器會(huì)在當(dāng)前作用于聲明這個(gè)變量（如果之前沒(méi)有聲明過(guò)的話），其次，引擎會(huì)詢問(wèn)當(dāng)前作用域是否有a這個(gè)變量，如果是，則將2賦值給它，如果否，則繼續(xù)查找這個(gè)變量

作用域嵌套

當(dāng)一個(gè)塊或者一個(gè)函數(shù)嵌套在另一個(gè)塊或函數(shù)里，就產(chǎn)生了作用域嵌套，在當(dāng)前作用域查找不到變量時(shí)會(huì)在向上查找，就好比，一個(gè)高樓，我要去一個(gè)朋友家里，我要在第一層查找朋友家，但是如果沒(méi)找到，就要去上一層，如果到達(dá)了頂層還沒(méi)找到，我們就不會(huì)在繼續(xù)查找了。

理解閉包

我們之前說(shuō)過(guò)當(dāng)函數(shù)可以記住并訪問(wèn)所在的詞法作用域，即使函數(shù)是在當(dāng)前的函數(shù)詞法作用域之外執(zhí)行，這是就產(chǎn)生了閉包
看一下下面的代碼

    function foo(){
        var a = "dog";
        function bar(){
            console.log(a)
        }
        bar();
    }
    foo();

我們可以看到bar函數(shù)能夠訪問(wèn)在foo函數(shù)里定義的a，但這只是閉包的一部分，bar對(duì)a的引用，可以看作是作用域的查找規(guī)則。則這些規(guī)則也是閉包的一部分。
那什么是真正的閉包的？

function foo(){
    var a = "dog";
    function bar(){
        console.log(a);
    }
    return bar
}
var baz = foo();
baz(); //dog

我們可以看到，bar函數(shù)可以訪問(wèn)foo函數(shù)的作用域內(nèi)部，之后我們把bar本身當(dāng)作返回值賦值給baz，通過(guò)baz的調(diào)用來(lái)執(zhí)行bar函數(shù)，實(shí)際上就是根據(jù)不同的標(biāo)識(shí)符來(lái)調(diào)用bar函數(shù)，達(dá)到在當(dāng)前詞法作用域外執(zhí)行的目的。
當(dāng)然無(wú)論以何種方式對(duì)函數(shù)類型的值進(jìn)行傳遞，讓函數(shù)在別處也能被調(diào)用到

function foo(){
    var name = "dog";
    function bar(){
        console.log(name);
    }
    baz(bar);
}
function baz(fn){
    fn();
}

閉包能干什么

我們可以通過(guò)來(lái)實(shí)現(xiàn)模塊

function module(){
    var name = "dog";
    var age = 13;
    function SayName(){
        console.log(name);
    }
    function SayAge(){
        console.log(age);
    }
    return {
        SayName: SayName
        SayAge: SayAge
    }
}

var foo = module();
foo.SayName();  // dog
foo.SayAge(); // 13

這個(gè)模式在javascript中被稱為模塊
我們來(lái)分析一下這個(gè)代碼，module函數(shù)返回一個(gè)對(duì)象，這個(gè)返回的對(duì)象保存了對(duì)內(nèi)部函數(shù)而不是內(nèi)部變量的引用，我們保持對(duì)數(shù)據(jù)的隱私且私有的狀態(tài)，可以將這個(gè)對(duì)象類型的返回值看作是一個(gè)公共API。這個(gè)返回的對(duì)象類型我們賦值給了foo，之后通過(guò)foo來(lái)調(diào)用這個(gè)API的屬性訪問(wèn)。SayAge()和SayName()函數(shù)具有涵蓋模塊實(shí)例內(nèi)部作用域的閉包，當(dāng)通過(guò)返回一個(gè)含有屬性引用的對(duì)象方式來(lái)講函數(shù)傳遞到詞法作用域外部時(shí)，就創(chuàng)造了觀察閉包的條件