for循环中var与let深入理解

for循环中var与let作用域不同的原理

for中的var和let的使用

var使用

//使用var声明，得到3个3
var a = [];
for (var i = 0; i < 3; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[0](); //3
a[1](); //3
a[2](); //3

let使用

//使用let声明，得到0,1,2
var a = [];
for (let i = 0; i < 3; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[0](); //0
a[1](); //1
a[2](); //2

for循环的展开

for循序的执行顺序是这样的：设置循环变量(var i = 0) ==> 循环判断(i<3) ==> 满足执行循环体 ==> 循环变量自增(i++)

var展开

var a = [];
{
  //我是父作用域
  var i = 0;
  if (0 < 3) {
    a[0] = function () {
      //我是子作用域
      console.log(i);
    };
  };
  i++; //为1
  if (1 < 3) {
    a[1] = function () {
      console.log(i);
    };
  };
  i++; //为2
  if (2 < 3) {
    a[2] = function () {
      console.log(i);
    };
  };
  i++; //为3
  // 跳出循环
}
//调用N次指向都是最终的3
a[0](); //3
a[1](); //3
a[2](); //3

let展开

var a = [];
{
  //我是父作用域
  let i = 0;
  if (0 < 3) {
    a[0] = function () {
      //我是子作用域
      console.log(i);
    };
  };
  i++; //为1
  if (1 < 3) {
    a[1] = function () {
      console.log(i);
    };
  };
  i++; //为2
  if (2 < 3) {
    a[2] = function () {
      console.log(i);
    };
  };
  i++; //为3
  // 跳出循环
}
//调用N次指向都是最终的3
a[0](); //3
a[1](); //3
a[2](); //3

但是，let这样写的结果跟var是一样的。其实浏览器底层的实现跟上边的实现是不一样，详细情况不解释，只写最后实现代码

var a = []; 
{
  //我是父作用域
  let i = 0;
  if (i < 3) {
    //这一步模拟底层实现
    let k = i;
    a[k] = function () {
      //我是子作用域
      console.log(k);
    };
  };
  i++; //为1
  if (i < 3) {
    let k = i;
    a[k] = function () {
      console.log(k);
    };
  };
  i++; //为2
  if (i < 3) {
    let k = i;
    a[k] = function () {
      console.log(k);
    };
  };
  i++; //为3
  // 跳出循环
}
a[0](); //0
a[1](); //1
a[2](); //2

总结

参考-听风是风