閉包

「函數(shù)」和「函數(shù)內(nèi)部能訪問(wèn)到的變量」（也叫環(huán)境）的總和，就是一個(gè)閉包膏燃。

JavaScript初學(xué)者對(duì)閉包聞虎色變刷允，感覺(jué)玄之又玄，要談我們不得不從一個(gè)經(jīng)典錯(cuò)誤談起

<div id="divTest">
    <span>0</span> <span>1</span> <span>2</span>     <span>3</span>
</div>
<div id="divTest2">
    <span>0</span> <span>1</span> <span>2</span> <span>3</span>
</div>

綁定每個(gè)span的click事件奶躯，讓鼠標(biāo)點(diǎn)擊span的時(shí)候alert出對(duì)應(yīng)的index

 var spans = $("#divTest span");
  for (var i = 0; i < spans.length; i++) {
   spans[i].onclick = function() {
       alert(i);
   }
}

很簡(jiǎn)單的功能可是卻偏偏出錯(cuò)了，每次alert出的值都是4亿驾，所以然者何嘹黔？

內(nèi)部函數(shù)

所謂內(nèi)部函數(shù)就是定義在函數(shù)內(nèi)的函數(shù)，俗稱(chēng)函數(shù)嵌套

function outerFn () {
    function innerFn () {}
}

innerFn就是一個(gè)被包在outerFn作用域中的內(nèi)部函數(shù)莫瞬。這意味著儡蔓，在outerFn內(nèi)部調(diào)用innerFn是有效的，而在outerFn外部調(diào)用innerFn則是無(wú)效的疼邀。下面代碼會(huì)導(dǎo)致一個(gè)JavaScript錯(cuò)誤：

function outerFn() {
    console.log("Outer function");
    function innerFn() {
        console.log("Inner function");
    }
}
innerFn();

不過(guò)在outerFn內(nèi)部調(diào)用innerFn喂江，則可以成功運(yùn)行：

function outerFn() {
    console.log("Outer function");
    function innerFn() {
        console.log("Inner function");
    }
    innerFn();
}
outerFn();

逃脫

JavaScript允許像傳遞任何類(lèi)型的數(shù)據(jù)一樣傳遞函數(shù)，也就是說(shuō)JavaScript中的內(nèi)部函數(shù)能夠逃脫定義他們的外部函數(shù)旁振。

全局變量

我們可以通過(guò)把內(nèi)部函數(shù)定義為全局變量的方式获询，實(shí)現(xiàn)內(nèi)部函數(shù)在外部調(diào)用

var globalVar;

function outerFn() {
    console.log("Outer function");
    function innerFn() {
        console.log("Inner function");
    }
    globalVar = innerFn;
}
outerFn();
globalVar();

調(diào)用outerFn時(shí)會(huì)修改全局變量globalVar涨岁，這時(shí)候它的引用變?yōu)閕nnerFn，此后調(diào)用globalVar和調(diào)用innerFn一樣吉嚣。這時(shí)在outerFn外部直接調(diào)用innerFn仍然會(huì)導(dǎo)致錯(cuò)誤梢薪，這是因?yàn)閮?nèi)部函數(shù)雖然通過(guò)把引用保存在全局變量中實(shí)現(xiàn)了逃脫，但這個(gè)函數(shù)的名字依然只存在于outerFn的作用域中尝哆。

返回值

可以通過(guò)在父函數(shù)的返回值來(lái)獲得內(nèi)部函數(shù)引用

function outerFn() {
    console.log("Outer function");
    function innerFn() {
        console.log("Inner function");
    }
    return innerFn;
}
var fnRef = outerFn();
fnRef();

這里并沒(méi)有在outerFn內(nèi)部修改全局變量秉撇，而是從outerFn中返回了一個(gè)對(duì)innerFn的引用。通過(guò)調(diào)用outerFn能夠獲得這個(gè)引用秋泄，而且這個(gè)引用可以可以保存在變量中琐馆。

閉包

這種即使離開(kāi)函數(shù)作用域的情況下仍然能夠通過(guò)引用調(diào)用內(nèi)部函數(shù)的事實(shí)，意味著只要存在調(diào)用內(nèi)部函數(shù)的可能恒序，JavaScript就需要保留被引用的函數(shù)啡捶。而且JavaScript運(yùn)行時(shí)需要跟蹤引用這個(gè)內(nèi)部函數(shù)的所有變量，直到最后一個(gè)變量廢棄奸焙，JavaScript的垃圾收集器才能釋放相應(yīng)的內(nèi)存空間）。

說(shuō)了半天總算和閉包有關(guān)系了彤敛，閉包是指有權(quán)限訪問(wèn)另一個(gè)函數(shù)作用域的變量的函數(shù)与帆，創(chuàng)建閉包的常見(jiàn)方式就是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù)，就是我們上面說(shuō)的內(nèi)部函數(shù)墨榄，所以剛才說(shuō)的不是廢話(huà)玄糟，也是閉包相關(guān)的

變量的作用域

內(nèi)部函數(shù)也可以有自己的變量，這些變量都被限制在內(nèi)部函數(shù)的作用域中：

function outerFn() {
    console.log("Outer function");
    function innerFn() {
        var innerVar = 0;
        innerVar++;
        console.log("Inner function\t");
        console.log("innerVar = "+innerVar+"");
    }
    return innerFn;
}

var fnRef = outerFn();
fnRef();
fnRef();

var fnRef2 = outerFn();
fnRef2();
fnRef2();

每當(dāng)通過(guò)引用或其它方式調(diào)用這個(gè)內(nèi)部函數(shù)時(shí)袄秩，就會(huì)創(chuàng)建一個(gè)新的innerVar變量阵翎，然后加1，最后顯示

全局變量

內(nèi)部函數(shù)也可以像其他函數(shù)一樣引用全局變量：

var globalVar = 0;

function outerFn() {
    console.log("Outer function");
    function innerFn() {
        globalVar++;
        console.log("Inner function\t");
        console.log("globalVar = " + globalVar + "");
    }
    return innerFn;
}

var fnRef = outerFn();
fnRef();
fnRef();

var fnRef2 = outerFn();
fnRef2();
fnRef2();

父函數(shù)變量

但是如果這個(gè)變量是父函數(shù)的局部變量又會(huì)怎樣呢之剧？因?yàn)閮?nèi)部函數(shù)會(huì)引用到父函數(shù)的作用域（有興趣可以了解一下作用域鏈和活動(dòng)對(duì)象的知識(shí)）郭卫，內(nèi)部函數(shù)也可以引用到這些變量

function outerFn() {
    var outerVar = 0;
    console.log("Outer function");
      function innerFn() {
        outerVar++;
        console.log("Inner function\t");
        console.log("outerVar = " + outerVar + "");
    }
    return innerFn;
}

var fnRef = outerFn();
fnRef();
fnRef();

var fnRef2 = outerFn();
fnRef2();
fnRef2();

我們看到的是前面兩種情況合成的效果，通過(guò)每個(gè)引用調(diào)用innerFn都會(huì)獨(dú)立的遞增outerVar背稼。也就是說(shuō)第二次調(diào)用outerFn沒(méi)有繼續(xù)沿用outerVar的值贰军，而是在第二次函數(shù)調(diào)用的作用域創(chuàng)建并綁定了一個(gè)新的outerVar實(shí)例，兩個(gè)計(jì)數(shù)器完全無(wú)關(guān)蟹肘。

當(dāng)內(nèi)部函數(shù)在定義它的作用域的外部被引用時(shí)词疼，就創(chuàng)建了該內(nèi)部函數(shù)的一個(gè)閉包。這種情況下我們稱(chēng)既不是內(nèi)部函數(shù)局部變量帘腹，也不是其參數(shù)的變量為自由變量贰盗，稱(chēng)外部函數(shù)的調(diào)用環(huán)境為封閉閉包的環(huán)境。從本質(zhì)上講阳欲，如果內(nèi)部函數(shù)引用了位于外部函數(shù)中的變量舵盈，相當(dāng)于授權(quán)該變量能夠被延遲使用陋率。因此，當(dāng)外部函數(shù)調(diào)用完成后书释，這些變量的內(nèi)存不會(huì)被釋放（最后的值會(huì)保存）翘贮，閉包仍然需要使用它們。

閉包之間的交互

當(dāng)存在多個(gè)內(nèi)部函數(shù)時(shí)爆惧，很可能出現(xiàn)意料之外的閉包狸页。我們定義一個(gè)遞增函數(shù)，這個(gè)函數(shù)的增量為2

function outerFn() {
    var outerVar = 0;
      console.log("Outer function");
    function innerFn1() {
        outerVar++;
        console.log("Inner function 1\t");
        console.log("outerVar = " + outerVar + "");
    }

    function innerFn2() {
        outerVar += 2;
        console.log("Inner function 2\t");
        console.log("outerVar = " + outerVar + "");
    }
    return { "fn1": innerFn1, "fn2": innerFn2 };
}

var fnRef = outerFn();
fnRef.fn1();
fnRef.fn2();
fnRef.fn1();

var fnRef2 = outerFn();
fnRef2.fn1();
fnRef2.fn2();
fnRef2.fn1();

我們映射返回兩個(gè)內(nèi)部函數(shù)的引用扯再，可以通過(guò)返回的引用調(diào)用任一個(gè)內(nèi)部###函數(shù)

innerFn1和innerFn2引用了同一個(gè)局部變量芍耘，因此他們共享一個(gè)封閉環(huán)境。當(dāng)innerFn1為outerVar遞增一時(shí)熄阻，就為innerFn2設(shè)置了outerVar的新的起點(diǎn)值斋竞，反之亦然。

我們也看到對(duì)outerFn的后續(xù)調(diào)用還會(huì)創(chuàng)建這些閉包的新實(shí)例秃殉，同時(shí)也會(huì)創(chuàng)建新的封閉環(huán)境坝初，本質(zhì)上是創(chuàng)建了一個(gè)新對(duì)象，自由變量就是這個(gè)對(duì)象的實(shí)例變量钾军，而閉包就是這個(gè)對(duì)象的實(shí)例方法鳄袍，而且這些變量也是私有的，因?yàn)椴荒茉诜庋b它們的作用域外部直接引用這些變量吏恭，從而確保了面向?qū)ο髷?shù)據(jù)的專(zhuān)有性拗小。

解惑

現(xiàn)在我們可以回頭看看開(kāi)頭寫(xiě)的例子就很容易明白為什么第一種寫(xiě)法每次都會(huì)alert 4了。

for (var i = 0; i < spans.length; i++) {
   spans[i].onclick = function() {
       alert(i);
   }
}

上面代碼在頁(yè)面加載后就會(huì)執(zhí)行樱哼，當(dāng)i的值為4的時(shí)候哀九，判斷條件不成立，for循環(huán)執(zhí)行完畢搅幅，但是因?yàn)槊總€(gè)span的onclick方法這時(shí)候?yàn)閮?nèi)部函數(shù)阅束，所以i被閉包引用，內(nèi)存不能被銷(xiāo)毀茄唐，i的值會(huì)一直保持4围俘，直到程序改變它或者所有的onclick函數(shù)銷(xiāo)毀（主動(dòng)把函數(shù)賦為null或者頁(yè)面卸載）時(shí)才會(huì)被回收。

這樣每次我們點(diǎn)擊span的時(shí)候琢融，onclick函數(shù)會(huì)查找i的值（作用域鏈?zhǔn)且梅绞剑┙缒担徊榈扔?，然后就alert給我們了漾抬。而第二種方式是使用了一個(gè)立即執(zhí)行的函數(shù)又創(chuàng)建了一層閉包宿亡，函數(shù)聲明放在括號(hào)內(nèi)就變成了表達(dá)式，后面再加上括號(hào)就是調(diào)用了纳令，這時(shí)候把i當(dāng)參數(shù)傳入挽荠，函數(shù)立即執(zhí)行克胳，num保存每次i的值。

var spans2 = $("#divTest2 span");
    $(document).ready(function() {
        for (var i = 0; i < spans2.length; i++) {
            (function(num) {
                spans2[i].onclick = function() {
                    alert(num);
                }
            })(i);
        }
    });