浅谈var、let和const区别

前言：随着2015年6月 ECMAScript 6.0 发布以来，有几个新的变量声明方式进入前端开发者的视线，即 let、const、import 和 class 命令，而这些新的声明方式之中有两个容易和 var 混淆，那就是 let 和 const。那这两个新的声明方式和咱们以前使用的 var 声明方式有什么不一样呢，那么是什么缘由致使 ES6 推崇新的声明方式摒弃传统的声明方式呢，让咱们经过这篇文章一探究竟。

简单介绍：

let 的用法相似于 var，可是 let 只在所在的代码块内有效，因此咱们通常使用 let 替代 var。而 const 用来声明常量。

让咱们先看一看这张表：

声明方式	变量提高	暂时性死区	重复声明	初始值	做用域
var	容许	不存在	容许	不须要	除块级
let	不容许	存在	不容许	不须要	块级
const	不容许	存在	不容许	须要	块级

接下来咱们根据这几个方面来介绍 var、let和const的区别：变量提高、暂时性死区、重复声明、初始值和做用域。

1、变量提高

概述：变量可在声明以前使用。

首先看这三段代码：

console.log(a);//正常运行，控制台输出 undefined
var a = 1;
复制代码

console.log(b);//报错，Uncaught ReferenceError: b is not defined
let b = 1;
复制代码

console.log(c);//报错，Uncaught ReferenceError: c is not defined
const c = 1;
复制代码

var 命令常常会发生变量提高现象，按照通常逻辑，变量应该在声明以后使用才对。为了纠正这个现象，ES6 规定 let 和 const 命令不发生变量提高，使用 let 和 const 命令声明变量以前，该变量是不可用的。主要是为了减小运行时错误，防止变量声明前就使用这个变量，从而致使意料以外的行为。

2、暂时性死区

概述：若是在代码块中存在 let 或 const 命令，这个区块对这些命令声明的变量，从一开始就造成了封闭做用域。凡是在声明以前就使用这些变量，就会报错。

var tmp = 123;

if (true) {
	tmp = 'abc';//报错，Uncaught ReferenceError: tmp is not defined
	let tmp;
}
复制代码

这段代码的原意是在 if 内定义外部的 tmp 为 'abc'。

但现实是，存在全局变量 tmp，可是块级做用域内 let 又声明了一个 tmp变量，致使后者被绑定在这个块级做用域中，因此在 let 声明变量前，对 tmp 赋值就报错了。

3、重复声明

概述：指在相同做用域内，重复声明同一个变量。

let 和 const 命令声明的变量不容许重复声明：

function func(){
  let a = 10;
  const PI = 3.1415;
  
  var a = 1;// 报错，Uncaught SyntaxError: Identifier 'a' has already been declared
  var PI = 3;// 报错，Uncaught SyntaxError: Identifier 'PI' has already been declared
}
// 当调用func()时报错，Uncaught SyntaxError: Identifier 'a' has already been declared
function func(){
  let a = 10;
  const PI = 3.1415;
  
  let a = 1;// 报错，Uncaught SyntaxError: Identifier 'a' has already been declared
  const PI = 3;// 报错，Uncaught SyntaxError: Identifier 'PI' has already been declared
}
复制代码

var 是容许重复定义的，而这又会给咱们带来什么麻烦呢？

var i = 10;
for(var i = 0;i < 5;i++){
  console.log(i);
}
console.log(i);// 输出 5
复制代码

对于学习过静态（类型）语言的人知道，这段代码要是替换成 c 语言或其余静态语言，输出的结果应该是 10。然而对于 javascript 来讲，这段代码的输出结果是 5。由于 var 命令没有块级做用域，因此 for 循环括号内的变量 i 会覆盖外层 i，并且 var 容许重复声明，因此这段代码中 i 被声明了两次,i 的最终结果就被 for 循环的 i 给覆盖了。

4、初始值

因为 const 声明的是只读的常量，一旦声明，就必须当即初始化，声明以后值不能改变。

const PI = 3.1415;
PI = 3;// 报错，Uncaught TypeError: Assignment to constant variable.
复制代码

5、做用域

在 ES5 中只有全局做用域和函数做用域，没有块级做用域，这带来不少不合理的场景。

第一种场景，内层变量可能会覆盖外层变量。

var tmp = new Date();//处于全局做用域

function f() {
  console.log(tmp);//处于函数做用域
  if (false) {
    var tmp = 'hello world';
  }
}

f(); // undefined
复制代码

上面代码的原意是，if代码块的外部使用外层的tmp变量，内部使用内层的tmp变量。

然而现实是在这段代码中，function 内部的2个 tmp 变量处在同一函数做用域，因为变量提高，致使函数做用域中的 tmp 覆盖全局做用域中的 tmp，因此，f()输出结果为undefined。

第二种场景，用来计数的循环变量泄露为全局变量（前面在重复声明中提到的）：

var i = 10;
for(var i = 0;i < 5;i++){
  console.log(i);
}
console.log(i);// 输出 5
复制代码

上面代码中，变量i只用来控制循环，可是循环结束后，它并无消失，泄露成了全局变量。

本文内容以阮一峰的《ECMAScript 6 入门》为基础进行总结，欢迎各位提出文章内容中有错误和疑惑的地方~