var、let和const的区别详解

  let 和 const 是 ECMAScript6 新推出的特性，其中 let 是能够替代 var 的“标准”，所以我们探讨 var、let 和 const 的区别，首先应该知道 var 到底有什么不规范的地方，或者是说有什么弊端。

var 的 特性

变量提升

  var 是 Javascript 用来定义变量的一个关键字，这是一个简单的变量定义方式

var a = 0;

  但是如果我们在定义这个变量之前，查询这个 a 的话，其实是不会报错误的

console.log(a); // undefined
var a = 0;
console.log(a); // 0

  虽然它输出了 undefined ，但这并不是我们想要的，我们希望在变量初始化前，是无法访问这个变量的，这虽然是一个约束，但是能让你的程序变得更可捉摸与维护。而 var 之所以能在var a = 0;前被访问，是因为这一句话在编译的时候其实是按以下的顺序进行的：

var a;
console.log(a); // undefined
a = 0;
console.log(a); // 0

  这就是为什么第二行 a 会打印出 undefined 的原因了，这个叫做变量提升，使用 var 初始化变量的时候，在该作用域的开始，会先定义这个变量，再在后面进行赋值(初始化)。所以甚至你可以这么玩儿：

console.log(a); // undefined
a = 0;
console.log(a); // 0
var a;

  这样也是可以成功打印的，所以大家看到这应该明白了 var 会对程序眼维护造成的困扰吧？ a 明明一路看下来没有看到的，居然依旧正常使用？！！这个时候还需要从该作用域查看到底有没有隐藏的var a;如果没有的话那还需要去作用域外边寻找。

console.log(a); // undefined
let a = 0;
console.log(a); // 0

var 的作用域

  我们再来看一下以下代码

for(var i = 0; i < 5; i++){
    var a = 0;
}
console.log(i); // 5
console.log(a); // 0

  我们定义在 for 循环块中的变量 i、a 居然在循环外都能被取到，这显然并不规范。

  那么这里可以再给大家提一个面试经常也会提到的题目

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

  几乎一模一样的代码，就因为var、let的作用域区别，得到的结果大不一样。对于第一个for循环来说，i在全局范围内都有效，在setTimeout函数中没有找到i的定义，所以在全局里才能找到变量i，在for循环执行完之后，event loop中的，setTimeout中的匿名函数开始执行，这个时候的全局i其实已经是5了，所以全部打印出了5。

  而对于第二个for循环来说，let有块级作用域的概念，且值得注意的是for循环头部的let声明有一个特殊的行为，这个行为指出变量在循环过程中不止被声明一次,每次迭代都会被声明。随后的每个迭代都会使用上一个迭代结束时的值来初始化这个变量。这使得我们的j，每次执行其实都是块级作用域中的不同的一个变量，自然就不是最终的5了。

  所以如果在不能使用E6的时候，可以使用闭包来创建一个新的作用域。这个闭包能保留对它被声明的位置所处的作用域的引用，将i强行容留在自执行函数的作用域中使其不被回收。这样就能获取到每次的i值。

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

var 可重复定义

  这个很好理解，var是允许定义两次的，不报错误。

var a = 0;
console.log(a); // 0
var a = 1;
console.log(a); // 1

  编辑器会在判断有已经声明的同名变量时,会忽略 var 关键字，然后直接赋值，所以如果重复使用的一个声明有一个初始值,那么它是一个赋值语句。如果重复使用的一个声明没有一个初始值,那么它不会对原来存在的变量有任何的影响。这对于 ES5 之前的 JS 是合法的，但是 ES6 后，认为这种重复定义的做法是不科学的, let 和 const 皆不允许作用域内重复一个定义同名变量。

现在我们来讲讲 let

暂存死区

  首先，绝对是不允许在let定义变量前使用这个变量的

console.log(a); // ReferenceError: a is not defined
let a = 0;
console.log(a); // 0

  let声明不会被提升到当前执行上下文的顶部，从该块级作用域开始，到初始化位置，称作“暂存死区”，所以在对于a的暂存死区中使用a会报Reference错误。

块级作用域

  let声明的变量拥有块级作用域，在块级作用域外是访问不到该变量的，而var不同，在for循环中定义的变量可以在外部访问到，这会导致一些意想不到的bug。注意，大括号 {} 是块级作用域，不是说函数作用域。

禁止重定义

let a = 0;
console.log(a); // 0
let a = 1;
console.log(a); // SyntaxError: Identifier 'a' has already been declared

window 对象

  在 HTML 中, 全局作用域是针对 window 对象，var关键字定义的全局作用域变量属于 window 对象，而let定义的不属于。注意这是在浏览器环境下，如果是Node则无window对象。

var a = 0;
console.log(window.a) // 0
let b = 1;
console.log(window.b) // undefined

const

  其实const和let非常非常类似，let该有的特性，const都有，不同就是，第一，const不允许“修改”变量，第二const必须初始化，而let不需要

const a = 0;
a = 1; // TypeError: Assignment to constant variable

const b; // SyntaxError: Missing initializer in const declaration

  不过const定义的不是真正意义上的常量，如果定义的是一个对象或者数组，其实是可以变化的，只不过不能将不同的数据类型分配给他，一般可以记：const初始化定义后，不可使用 = 赋值。

const a = {}
a.b = 1;
console.log(a) // { b: 1 }
a = 1 // TypeError: Assignment to constant variable