從閉包案例中學習閉包的作用，會不會由你。 - pssp－IT工程師數位筆記本

文章出處

　　在文章初識js中的閉包中講解了閉包的一些概念，但是對于初學者來說可能并不是特別的容易理解，我今天用兩個案例來解釋閉包可能會好理解一些，在講案例之前，我們需要了解一些閉包的概念。在看這篇文章之前，請先看上面的那篇文章，不然效果不會太好。

閉包的理解：

　　所謂的閉包就是可以創建一個獨立的環境，每個閉包里面的環境都是獨立的，互不干擾。

閉包的創建：

　　一個函數中嵌套另外一個函數，并且將這個函數return出去，然后將這個return出來的函數保存到了一個變量中，那么就創建了一個閉包。

為啥要學閉包之沒有使用閉包的情況1：

var arr = [];
for(var i=0;i<2;i++){
    arr[i] = function(){
        console.log(i);
    }
}
arr[0](); //2
arr[1](); //2

　　實際情況我們是要打印0,1,2,3這樣的數，但是每次都是打印2，什么情況呢？雖然我們在for中給arr的每個值添加了一個匿名函數，但是在for循環中我們并沒有執行這個函數，而是在for循環以后執行的這個函數，那么自然打印出來的就是for循環完以后i的值。

var arr = [];
// for(var i=0;i<2;i++){
    var i = 2;
    arr[0] = function(){
        console.log(i);
    }
    arr[1] = function(){
        console.log(i);
    }
// }
arr[0](); //2
arr[1](); //2

　　相當于這樣，雖然這個函數沒有執行，但是arr的i已經給執行了，因為arr不是函數啊，肯定是執行的，而你函數沒有調用自然就不會執行，當函數調用的時候i已經是2了。既然如此只要我們在for循環的時候直接執行這個函數就ok。

var arr = [];
for(var i=0;i<2;i++){
    arr[i] = function(){
        console.log(i);
    }
    arr[i]();
}
//0
//1

　　這樣，在每一次for循環的時候就直接執行了這個函數，打印正常，但是我們這樣同樣有一個問題，那就是在每一次for循環的時候這個函數就已經被執行了，我們要的是我們想什么時候調用就時候調用，而不是直接在for執行中直接執行，那么顯然這樣做是達不到我們的目的的。

　　現在我們在想想閉包的概念，閉包可以創建獨立的環境，并且每一個閉包的環境是獨立的，也就是說，我們可以通過閉包來保存這些不同的變量。

var arr = [];
for(var i=0;i<2;i++){
    arr[i] = function(){
        console.log(i);
    }
}

　　還是這段代碼，我們回顧一下閉包的創建方法：一個函數中嵌套另外一個函數，并且將這個函數return出去，然后將這個return出來的函數保存到了一個變量中，那么就創建了一個閉包。

var arr = [];
for(var i=0;i<2;i++){
    arr[i] = a(i);
}

function a(i){
    return function(){
        console.log(i);
    }
}

arr[0](); //0
arr[1](); //1

　　此時就是一個閉包，這樣寫有些麻煩，我們對此改進一下。

var arr = [];
for(var i=0;i<3;i++){
    arr[i] = (function(i){
        return function(){
            console.log(i);
        }
    })(i)
}

arr[0](); //0
arr[1](); //1
arr[2](); //2

　　如果你對（）包含起來的函數有些疑惑，對匿名函數的深入理解（徹底版）這篇文章深入的講解了函數的各種調用方式。如果你沒有理解建議你從頭再看一遍，當然看不看是你的事，反正我是理解了。

　　其實還可以這樣

var arr = [];
for(var i=0;i<3;i++){
    (function(i){
        arr[i] = function(){
            console.log(i);
        }
    })(i)
}

arr[0](); //0
arr[1](); //1
arr[2](); //2

　　此時arr里面的i用的是閉包里面的i，而不是for中的i，因為我們說過每個閉包的環境都是獨立的。

沒有使用閉包的情況2：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

var lis = document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
    lis[i].onclick = function(){
        console.log(i); //3
    }
}

　　這個情況和情況1一樣都是因為，這個函數在執行的時候這個for循環已經結束了。

解決方法：

var lis = document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
    (function(i){
        lis[i].onclick = function(){
            console.log(i);
        }
    })(i)
}