在文章的開(kāi)頭陈肛，簡(jiǎn)單來(lái)提一下揍鸟，什么是閉包。

JavaScript中的閉包，就像一個(gè)副本阳藻，將某函數(shù)在退出時(shí)候的所有局部變量復(fù)制保存其中晰奖。 這些函數(shù)可以“記憶”他被創(chuàng)建時(shí)候的上下文環(huán)境，將外部變量保留在棧幀中腥泥。

首先匾南，我們來(lái)看這樣一個(gè)例子:

function buildList(list) {
    var result = [];
    for (var i = 0; i < list.length; i++) {
        var item = 'item' + i;
        result.push( function() {console.log(item + ' ' + list[i])} );
    }
    return result;
}
function testList() {
    var fnlist = buildList([1,2,3]);
    // 使用j是為了防止搞混---可以使用i
    for (var j = 0; j < fnlist.length; j++) {
        fnlist[j]();
    }
}
 testList() //輸出 "item2 undefined" 3 次

在上面這個(gè)例子中，console會(huì)輸出三次“item2 undefined”

01.png

function testList() {
    var fnlist = buildList([1,2,3]);
    // 使用j是為了防止搞混---可以使用i
    for (var j = 0; j < fnlist.length; j++) {
        fnlist[j]();
    }
}

實(shí)際上時(shí)運(yùn)行了三次console.log('item2' + ' ' + list[3])蹬癌，由于傳入函數(shù)bulidList的數(shù)組為[1, 2, 3]权她，list[3]的值類型自然是undefined。
若是我們將傳入的數(shù)組做出一點(diǎn)修改冀瓦，就會(huì)發(fā)現(xiàn)伴奥，console會(huì)將list[3]的值正確輸出。第一個(gè)for循環(huán)中的判斷條件由i < list.length改為i < 3翼闽，傳入的數(shù)組由[1, 2, 3]改為[1, 2, 3, 4]拾徙。

function buildList(list) {
    var result = [];
    for (var i = 0; i < 3; i++) {
        var item = 'item' + i;
        result.push( function() {console.log(item + ' ' + list[i])} );
    }
    return result;
}
function testList() {
    var fnlist = buildList([1, 2, 3, 4]);
    // 使用j是為了防止搞混---可以使用i
    for (var j = 0; j < fnlist.length; j++) {
        fnlist[j]();
    }
}
 testList() //輸出 "item2 4" 3 次

02.png

如果在for循環(huán)中產(chǎn)生了閉包，我們?nèi)绾巫屗敵鑫覀兿胍慕Y(jié)果呢感局？再來(lái)看一個(gè)例子吧尼啡。

var list = document.getElementById("list");

 //插入五個(gè)<li>標(biāo)簽
for ( i = 1; i <= 5; i++) {
  var item = document.createElement("LI");
  item.appendChild(document.createTextNode("Item " + i)); 

//分別為五個(gè)<li>標(biāo)簽綁定onclick事件
  item.onclick = function (ev) {
    console.log("Item " + i + " is clicked.");
  };
  list.appendChild(item);
}

這個(gè)例子中，我們想要的效果是點(diǎn)擊不同的<li>標(biāo)簽询微，console會(huì)輸出對(duì)應(yīng)的Itemi is cilick崖瞭。但是由于for循環(huán)里面產(chǎn)生了閉包，實(shí)際的結(jié)果是無(wú)論點(diǎn)擊哪個(gè)<li>撑毛，console輸出的都是Item 6 is clicked.

03.png

如果我們將代碼稍作修改书聚，再增加一層閉包，并將i作為參數(shù)傳入到函數(shù)中，我們將會(huì)得到正確地輸出雌续。

for ( i = 1; i <= 5; i++) {
  var item = document.createElement("LI");
  item.appendChild(document.createTextNode("Item " + i));
  (function(i){
  item.onclick = function (ev) {
    console.log("Item " + i + " is clicked.");
  };
  list.appendChild(item);
  })(i);
}

04.png

for ( i = 1; i <= 5; i++) {
  var item = document.createElement("LI");
  item.appendChild(document.createTextNode("Item " + i));
  (function(){
  item.onclick = function (ev) {
    console.log("Item " + i + " is clicked.");
  };
  list.appendChild(item);
  })();
}

05.png

for ( i = 1; i <= 5; i++) {
  var item = document.createElement("LI");
  item.appendChild(document.createTextNode("Item " + i));
  (function(){
    var j = i;
    item.onclick = function (ev) {
        console.log("Item " + j + " is clicked.");
    };
    list.appendChild(item);
    })();
}

這段代碼中灭贷，我增加了var j = i;，并將之前的i改為j略贮。此時(shí)甚疟，已經(jīng)能夠得到正確的輸出。

06.png

為什么增加了一個(gè)var j = i就可以得到正確的輸出了呢逃延？實(shí)際上原理和上面并沒(méi)有變化览妖，主要是因?yàn)檫@里產(chǎn)生了五個(gè)閉包，每一個(gè)閉包里面的j都引用了一個(gè)i值揽祥。但再稍加修改讽膏，就又會(huì)不同。接下來(lái)拄丰，我將var j = i;改為j = i;府树，看看會(huì)有什么變化。

07.png

for ( i = 1; i <= 5; i++) {
  var item = document.createElement("LI");
  item.appendChild(document.createTextNode("Item " + i));
  let j = i;
  item.onclick = function (ev) {
        console.log("Item " + j + " is clicked.");
    };
  list.appendChild(item);
}

這里let創(chuàng)建的變量j是擁有塊級(jí)作用域的，在ES6之前js是沒(méi)有塊級(jí)作用域的迫皱。
當(dāng)然歉闰，解決辦法還有很多，你覺(jué)得哪種辦法最優(yōu)雅呢卓起？