首頁猿問怎么理解for循環(huán)中用let聲明的...

怎么理解for循環(huán)中用let聲明的迭代變量每次是新的變量？

JavaScript

ABOUTYOU 2018-09-05 14:34:31

背景最近在總結(jié)基礎(chǔ)知識(shí)，然后看了阮一峰老師的es6教程，其中談及l(fā)et以及塊級(jí)作用域的時(shí)候，舉了一個(gè)經(jīng)典的例子，代碼如下：var a = [];for (var i = 0; i < 10; i++) { // 作用域a a[i] = function () { // 作用域b console.log(i); }; } a[6](); // 10因?yàn)閑s5不存在塊級(jí)作用域，所以迭代變量i泄露了，然后對(duì)于a數(shù)組內(nèi)每一個(gè)函數(shù)內(nèi)的i都是向上查詢作用域a的，所以結(jié)果是10。這個(gè)沒問題。下面的例子是用let來聲明迭代變量的var a = [];for (let i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); // 6老師是這樣解釋的上面代碼中，變量i是let聲明的，當(dāng)前的i只在本輪循環(huán)有效，所以每一次循環(huán)的i其實(shí)都是一個(gè)新的變量，所以最后輸出的是6。疑問我想不通每一次循環(huán)的i其實(shí)都是一個(gè)新的變量這個(gè)過程是怎么樣的，如果我理解為每次迭代都是新的一個(gè)塊級(jí)作用域，那么迭代變量的迭代（i++）是如何傳遞給下一個(gè)塊級(jí)作用域呢？自知之明雖然我知道結(jié)果，也知道這樣的問題是轉(zhuǎn)牛角尖，就是好奇問問。希望各路英雄指點(diǎn)迷津。

查看完整描述

1 回答

慕妹3242003

TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超6個(gè)贊

這是在for語句中的var與let的差異:

for (let x...)的循環(huán)在每次迭代時(shí)都為x創(chuàng)建新的綁定

以下用代碼直接看會(huì)比較容易的理解。這個(gè)改進(jìn)主要是為了要解決在for語句中的閉包結(jié)構(gòu)的問題。

原來的使用var的代碼，與去糖(desugar)后來看它在執(zhí)行時(shí)是這樣的模擬代碼:

//原來代碼for (var i = 0; i < 10; i++) { setTimeout(()=>console.log("i:",i), 1000); }

// 不需要加區(qū)塊符，因?yàn)閰^(qū)塊也不會(huì)影響var i;
i = 0;if (i < 10)
    setTimeout(()=>console.log("i:",i), 1000);
    i++;    if (i < 10)
        setTimeout(()=>console.log("i:",i), 1000);
        i++;//...

而使用了let后，會(huì)有塊級(jí)作用域的影響，原來的代碼與執(zhí)行時(shí)的去糖模擬代碼如下:

// 原來代碼for (let i = 0; i < 10; i++) { setTimeout(()=>console.log("i:",i), 1000); }

// 用區(qū)塊符區(qū)分每次循環(huán)的語句// 每次for語句開始，i指定為一個(gè)全域刻度__status，這只是方便說明而已// __status會(huì)記錄for語句i最后的值{ let i;
  i = 0;
  __status = {i};
}
{ let {i} = __status;  if (i < 10)
      setTimeout(()=>console.log("i:",i), 1000);
      __status = {i};
}   
    { let {i} = __status;
      i++;      if (i < 10)
          setTimeout(()=>console.log("i:",i), 1000);
          __status = {i};
    }    //...

反對(duì) 回復(fù) 2018-10-29