[面试专题]从for循环看let和var的区别

从for循环看let和var的区别


MDN的let:

let允许你声明一个作用域被限制在块级中的变量、语句或者表达式。与var关键字不同的是,var声明的变量只能是全局或者整个函数块的。在 ECMAScript 2015 中,let 绑定不受变量提升的约束,这意味着 let 声明不会被提升到当前执行上下文的顶部。在块中的变量初始化之前,引用它将会导致 ReferenceError(而使用 var 声明变量则恰恰相反,该变量的值是 undefined )。这个变量处于从块开始到 let 初始化处理的”暂存死区“之中。
循环定义中的let作用域:循环体中是可以引用在for声明时用let定义的变量,尽管let不是出现在大括号之间.

var list = document.getElementById("list");

for (let i = 1; i <= 5; i++) {
  var item = document.createElement("LI");
  item.appendChild(document.createTextNode("Item " + i));
  let j = i;
  item.onclick = function (ev) {
    console.log("Item " + j + " is clicked.");
  };
  list.appendChild(item);
}

在每次循环的时候用 let j 保留的 i 的值,所以在 i 变化的时候,j 并不会变化。而console.log 的是 j,即使此处i声明换成var,结果依然一样.
MDN此处的写法是多余的,去掉let j = i依然可以实现上述效果,只是方便理解let.事实上去掉let j = i,等效于:

for (let i = 1; i <= 5; i++) {
  //let i = i;即将i的作用域放在了改块级作用域中
  var item = document.createElement("LI");
  item.appendChild(document.createTextNode("Item " + i));
  item.onclick = function (ev) {
    console.log("Item " + i + " is clicked.");
  };
  list.appendChild(item);
}
console.log(i)// Uncaught ReferenceError: i is not defined

上边代码中最后的ReferenceError表明,i虽然在for循环{}的外层,但是实际上是被绑定在该块级作用域内的.这里和var是不一样的,var声明的i在外层,因此成为全局变量.

变量提升(hoist)

let x = "global";
(function() {
    console.log(x); // Uncaught ReferenceError: x is not defined
    let x = 'part';
    console.log(x)
}());

众所周知,let变量没有hoist,按这个理解,函数内第一行log(x)应当是global才对,但是却报错了.去掉let x = 'part'就没有问题,这说明后边的声明影响到了第一行的log(x).

fn();
function fn(){
  var x = 1;
  console.log(x,y)
  var y = 2
}

执行过程:

  1. 找到所有用 function 声明的变量,在环境中「创建」这些变量。

  2. 将这些变量「初始化」并「赋值」为 function(){//具体内容}

  3. 执行代码,即fn()

  4. 函数体内找到所有用var声明的变量,在环境中「创建」这些变量

  5. 将这些变量「初始化」为 undefined。

  6. 开始执行代码,x = 1 将 x 变量「赋值」为 1

  7. 打印x = 1 ,而y还未赋值,因此为undefined
    如果var改为let:

  8. 找到所有用 function 声明的变量,在环境中「创建」这些变量。

  9. 将这些变量「初始化」并「赋值」为 function(){//具体内容}

  10. 执行代码,即fn()

  11. 函数体内找到所有用let声明的变量,在环境中「创建」这些变量

  12. 开始执行代码,x = 1 将 x 变量「赋值」为 1

  13. 打印 x = 1 ,而y还未「初始化」,因此Uncaught ReferenceError.这就是所谓暂时性死区.

阅读 5.9k发布于 2017-08-29
推荐阅读
前端进阶计划
用户专栏

前端面试专题与日常研究

84 人关注
17 篇文章
专栏主页
目录