閉包的理解

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

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

什么是閉包

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

閉包的原理

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

理解作用域

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

var a = 2

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

作用域嵌套

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

理解閉包

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

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

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

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

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

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

閉包能干什么

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