let 与 var 的三个区别

在常见的代码中，想要更好地使用 let ，至少需要分清 let 与 var 的三个区别。

1. 第一个区别为是否存在「变量提升」。

当你 var 声明了一个变量，并且想要在该变量声明之前 log 该变量时，会得到一个 undefined 结果。

   console.log(v) // undefined
   var v = 1;

当你 let 声明了一个变量，并且想要在该变量声明之前 log 该变量时，会得到一个 ReferenceError。

 console.log(v) // ReferenceError: v is not defined
 let v = 1;

这两段代码结果的不同，是 var 与 let 在声明、初始化、赋值这三方面开始的时间不同造成的。

var 会在代码编译时声明和初始化变量（初始化为 undefined）。let 声明在编译时只会声明变量，当代码执行到类似于 let v = 1; 这样的代码时，变量才会被初始化和赋值。

js 中有一个名词，叫暂时死区（TDZ）——你不能访问一个已经声明但没有初始化的变量。因此，在 let 变量声明语句前使用该变量会产生错误。

至于「变量提升」，并不是一个标准词汇，只是一个为了便于理解这种现象而使用的词汇。

---

2. 第二个区别为是否存在「块作用域」。

js 有两种作用域，函数体的内部是函数作用域，两个 { 会形成一个块作用域。
var 声明的变量总是归属于函数作用域，let 声明的变量归属于块作用域。

function func() {
  if(true) {
    var x = 1;
    let y = 2;
  }

  console.log(x); // 1
  console.log(y); //ReferenceError: y is not defined
}
func();
console.log(x); // ReferenceError: x is not defined

函数体内部 x 结果为 1，y 的访问报错。函数体外部访问 x 报错。

---

3. 第三个区别为 「for 循环」时行为的不同。

    for (var i = 0; i < 6; i++) {
    setTimeout(function() {
        console.log(i)
    }, 0)
   } //6 6 6 6 6 6
   for (let i = 0; i < 6; i++) {
     setTimeout(function() {
        console.log(i)
     }, 0)
    } //0 1 2 3 4 5

在第一个循环中，var i 为 for 循环声明的一个 i。在第二个循环中，let i 为 for 循环的每一次迭代都重新声明一个 i。所以在回调函数中，得到 var 声明的 i 的最终值，得到 六个 let 声明的 i。

for(){} 这个语句中的 () 是一个作用域，而花括号又是一个作用域，小括号的作用域包裹大括号作用域。let i 属于块作用域，所以每次循环都会声明。var i 只归属于函数作用域，所以只声明一次。

---

如果文章对您有帮助，请点喜欢支持一下。

Goran Ivos 2017-04-25 07-26-20 .jpg