摘要：當(dāng)然相比較，說出答案至少比答案多知道函數(shù)的用法，重點(diǎn)不在那個(gè)延遲，重點(diǎn)在函數(shù)與作用域鏈，后面會細(xì)說。

最近一道面試試題非常火熱，堪稱面試界網(wǎng)紅：

function test(){
     for (var i=0; i<5; i++) { 
        setTimeout( function timer() {
            console.log(new Date(),i);
        }, 1000*i );
    }
    console.log("end",new Date(),i); //為方便后邊演示，這里加了打印end標(biāo)志
}

不理解閉包，變量作用域和setTimeout函數(shù)的同學(xué)很多會給出答案A：0,1,2,3,4,5和答案B：5，0,1,2,3,4;不奇怪，但正確答案卻是5,5,5,5,5，且是隔一秒出來一個(gè)。當(dāng)然相比較，說出答案B至少比答案A多知道setTimeout函數(shù)的用法，重點(diǎn)不在那個(gè)延遲1000*i ms，重點(diǎn)在setTimeout函數(shù)與作用域鏈，后面會細(xì)說。
首先三個(gè)概念：
setTimeout(code,millisec)函數(shù)：用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式，接受兩個(gè)參數(shù)，第一個(gè)參數(shù)為一個(gè)函數(shù)或計(jì)算表達(dá)式，我們通過該函數(shù)定義將要執(zhí)行的操作。第二個(gè)參數(shù)為一個(gè)時(shí)間毫秒數(shù)，表示延遲執(zhí)行的時(shí)間。至于什么異步調(diào)用，隊(duì)列這些概念，這里不做詳述，可閱讀：http://www.alloyteam.com/2015...
函數(shù)作用域：函數(shù)內(nèi)部定義的變量與外部定義的變量，外部指包含這個(gè)函數(shù)的空間，是父子關(guān)系，二不是兄弟，編過程的應(yīng)該都理解；無論函數(shù)在哪里被調(diào)用，也無論它如何被調(diào)用，它的詞法作用域都只由函數(shù)被聲明時(shí)所處的位置決定；
閉包：閉包（Closure）是詞法閉包（Lexical Closure）的簡稱，是引用了自由變量的函數(shù)。這個(gè)被引用的自由變量將和這個(gè)函數(shù)一同存在，即使已經(jīng)離開了創(chuàng)造它的環(huán)境也不例外。詳細(xì)運(yùn)用，推薦讀：http://www.ruanyifeng.com/blo...，個(gè)人還是推薦紅寶書上面的講解。
等明白上面第一個(gè)settimeout概念后，最后一行為什么先打印最后一行的結(jié)果了；
明白變量作用域后，就會明白console.log("end",new Date(),i)中的i是for循環(huán)聲明的那個(gè)i變量，因?yàn)関ar聲明的變量不存在代碼塊（{}）作用域的概念，所以最后打印的值是5；
明白函數(shù)后，和變量作用域一起理解，我們可以得出類似如下所示的圖（如果理解不正確，還請大神指正）

在for循環(huán)聲明的五個(gè)TimeOut Callback函數(shù)都有對變量i的引用（這里的引用不是引用類型的引用，而是i作為函數(shù)作用域鏈的一個(gè)變量，由于閉包造成的），而不是拷貝。因?yàn)?個(gè)timeout函數(shù)都涉及到延遲執(zhí)行的情況，所以當(dāng)主線程執(zhí)行完后（end被打印時(shí)），timeout這些回調(diào)依次執(zhí)行（隊(duì)列：FIFO），此時(shí)i的值已經(jīng)為5了，知道以上這些，后面就簡單多了。

開始回到正題：
其實(shí)寫出這個(gè)函數(shù)期望輸出5，0,1,2,3,4，要達(dá)到這個(gè)結(jié)果，方法有多種，這里列出典型的三種：
方法1：IIFE：

function test(){
    for (var i = 0; i < 5; i++) {
     (function(j) { // j = i
      setTimeout(function() {
       console.log(new Date, j);
      }, 1000*j);
     })(i);
    }
    console.log(new Date, i);
}

方法2：函數(shù)調(diào)用按值傳遞：

var output = function (i) {
     setTimeout(function() {
      console.log(new Date, i);
     }, 1000);
};
function test(){
    for (var i = 0; i < 5; i++) {
     output(i); // 這里傳過去的 i 值被復(fù)制，而不是引用
    }
    console.log(new Date, i);
}

方法2：函數(shù)調(diào)用按值傳遞技巧版(利用setTimeout第三個(gè)參數(shù))：

function test(){
    for (var i = 0; i < 5; i++) {
         setTimeout(function(i) {
          console.log(new Date, i);
         }, 1000, i);
    }
    console.log(new Date, i);
}

方法3： ES6 使用le指令聲明：

function test(){
     for (let i=0; i<5; i++) { 
        setTimeout( function timer() {
            console.log(new Date(),i);
        }, 1000 );
    }
 //   console.log("end",new Date(),i);  //因?yàn)樽兞孔饔糜虻膯栴}，這里會報(bào)i 不存在，未聲明    
}

細(xì)度上面的三種方法，其實(shí)他們相似度很高。首先方法1（聲明即執(zhí)行）和方法2（提前聲明，調(diào)用時(shí)執(zhí)行），其實(shí)他們的思路完全一致，都利用了JavaSrcipt中函數(shù)基本類型變量傳值，都是值的拷貝，而不是值的引用，然后通過在for循環(huán)中執(zhí)行一個(gè)閉包函數(shù)，建立一個(gè)閉包作用域，來保證引用的i值為注冊該回調(diào)函數(shù)時(shí)的值。立即即執(zhí)行，如果看著別扭，下面這樣寫也是可以的：

    function test(){
        for (var i = 0; i < 5; i++) {
         (function() { // j = i
          var  j =i;
          setTimeout(function() {
           console.log(new Date, j);
          }, 1000);
         })();
        }
        console.log(new Date, i);
    }

簡化版：

    function test(){
        for (var i = 0; i < 5; i++) {
         (function(j) { // j = i
          setTimeout(function() {
          return function(){
                         console.log(new Date, j);
          }
          }, 1000);
         })(i);
        }
        console.log(new Date, i);
    }        

然后方法3，是利用ES6 let命令聲明變量塊級作用域的概念，和前面for循環(huán)使用var聲明i不同的是，var聲明的i在整個(gè)test()函數(shù)作用域內(nèi)有效，每一次循環(huán)， 新的i值都會覆蓋舊值；而let聲明的， 當(dāng)前的i只在本輪循環(huán)有效， 所以每一次循環(huán)的i其實(shí)都是一個(gè)新的變量，所以也導(dǎo)致打印end時(shí)，報(bào)i 不存在，未聲明的錯(cuò)誤，這就是塊級作用域的效果，所以5個(gè)timeout回調(diào)函數(shù)雖然都引用了變量i,但實(shí)際上這5個(gè)i是獨(dú)立的，僅在自己的塊級作用域內(nèi)有效，其寫法類似于：

   function test(){
    for (var i=0; i<5; i++) { 
      let j =i;
        setTimeout( function timer() {
            console.log(new Date(),j);
        }, 1000 );
    }
    console.log("end",new Date(),i); 
}

所以總體來看，上面的方法解決的思路都是從作用域這個(gè)概念上下手的，前兩者利用function聲明形成了自己的作用域，后者利用let命令形成的塊級作用域，而來確保對i值的正確引用。
以上就是自己對這個(gè)網(wǎng)紅面試題的深入理解，如果有說的有錯(cuò)或模棱兩可的地方，還請不吝指教。