从经典面试题看var与let

时间 2019-12-04

标签经典面试 var let 栏目快乐工作繁體版

原文原文链接

for (var index = 0; index < 5; index++) {
  setTimeout(function (){
    console.log(index);//5
  }, 10)
}
console.log(index)// 5

这是个老生常谈的问题，可是今天我才明白过来实际是怎么回事。
使用ES6语法的话，修改以下函数

for (let index = 0; index < 5; index++) {
  setTimeout(function (){
    console.log(index);//0,1,2,3,4
  }, 10)
}
console.log(index)// ReferenceError: index is not defined

var是在全局范围有效，因此执行setTimeout里的函数时，先是在函数内部寻找 index 变量，没有找到，因此去外层找，找到！这时index已经执行完循环，因此值为5；
而let则是声明在for循环的内部的，每一次for循环，一个block上下文，每次for循环都创建以下block。code

{
   let index = 0;
   setTimeout(function (){
     console.log(index);
   }, 10)
}

这也就解释了如下代码运行正常io

for(const index of array)

那么，var的for循环里发生了什么呢？console

var index;//变量提高
{
   index = 0;
   setTimeout(function (){
     console.log(index);
   }, 10)
}