偶然发现了 setTimeout 的隐藏彩蛋-优快云博客

最近在看《JavaScript高级程序设计（第4版）》，运行书中的一个代码示例时，偶然发现了 setTimeout 的一些之前没注意到的特性，觉得挺有意思的，就来记录一下。

书中代码如下：

for (var i = 0; i < 5; ++i) {
    setTimeout(() => console.log(i), 0);
}
//你可能以为会输出 0 1 2 3 4
//实际上会输出 5 5 5 5 5

以上结果，书中的解释是：

使用 var 声明迭代变量，在退出循环时，迭代变量保存的是导致循环退出的值。在之后执行超时逻辑时，所有的 i 都是同一个变量，因而输出的都是同一个最终值。

使用 let 声明迭代变量，JavaScript 引擎在后台会为每个迭代循环声明一个新的迭代变量。每个 setTimeout 引用的都是不同的变量实例，所以输出的是循环执行过程中每个迭代变量的值。

我的测试代码：

<script>
  "use strict";

  function testForVar() {
    for (var i = 0; i < 5; i++) {
      console.log("这是 testForVar 第" + Number(i + 1) + "次循环");
      //var msg = i; //效果一样
      let msg = i;
      setTimeout(
        (val) => {
          console.log(val + " VS " + i);
        },
        0,
        msg
      );
    }
  }

  testForVar();
  console.log("******");

  function testForLet() {
    // 使用 let 来定义循环变量，避免变量提升问题
    for (let i = 0; i < 5; i++) {
      //console.log(i === i);
      console.log("这是 testForLet 第" + Number(i + 1) + "次循环");
      //var msg = i; //效果一样
      let msg = i;
      setTimeout(
        (val) => {
          console.log(val + " VS " + i);
        },
        0,
        msg
      );
    }
  }

  testForLet();
</script>

输出结果如下：