var和let的区别(详解)

1. 作用域

1. 通过var定义的变量，作用域是整个封闭函数，是全域的 。
2. 通过let定义的变量，作用域是在块级或是子块中。

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // 同样的变量!
    console.log(x);  //
  }
  console.log(x);  //
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // 不同的变量
    console.log(x);  //
  }
  console.log(x);  //
}

2. 不可以在当前作用域重复声明同一个变量

在同一个函数或同一个作用域中用let重复定义一个变量将引起 TypeError

function letTest() {
  let x = 1;
  let x = 2;
  console.log(x);
}

letTest()  //  报错

3. 变量提升

var声明的变量由于存在变量提升（hoist），不论var声明的变量处于当前作用域的第几行，都会提升到作用域的头部。

var a = 1;
function foo(){
  alert( a );   //  undefined
  var a = 2;
}
foo();

浏览器在运行代码之前会进行预解析，首先解析函数声明，定义变量，解析完之后再对函数、变量进行运行、赋值等。

那么let存在变量提升么？

let是存在变量提升的，在JavaScript中，所有的声明（var、function、let、const、class、function\*）都会存在变量提升，var声明的变量与let声明的变量区别在于初始化值的不同。

x = y = "global";
(function() {
    x; // undefined
    y; // Reference error: y is not defined

    var x = "local";
    let y = "local";
}());

var 声明的变量会被提升到作用域的顶部并初始化为undefined，而let声明的变量在作用域的顶部未被初始化，直到let声明的语句被赋值，因此当使用这个值的时候会导致一个reference error的错误，在let声明变量之前被称为temporal dead zone，即临时死亡区。

4. let与for循环配合

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

此时打印出的结果为0 1 2 3 4 ，let与for循环使用时，其作用域是(let i = 0; i < 5 ; i++ )，但是ECMAScript规定，会在{}块级作用域中定义一个let j临时变量与(let i = 0; i < 5 ; i++ )中的i相等，因此setTimeout中的i指向不同的i。

for(var i = 0; i < 5 ; i++ ){
  setTimeout(function(){
    console.log(i)  // 5次5
  },1000)
}

而如果换成var之后， 由于i是函数级变量，5个内部函数都指向了同一个i ,而i最后一次赋值是5，因此打印出是5个5。