JavaScript中var、let和const的区别

在前端面试中，特别是前端实习生的面试问题中，对于ES6的考查上，var、let、const这三种变量声明方式的异同点几乎是必考的，本文就来分析一下三者之间有什么区别。

一、前言

在ES6（ES2015）出现之前，JavaScript中声明变量只有通过var关键字，函数声明是通过 function关键字，而ES6出现后，声明的方式有var 、let 、const 、function 、 class，本文主要讨论 var 、let 和 const 之间的区别。

二、var

如果使用关键字var声明一个变量，那么这个变量就属于当前的函数作用域，如果声明是发生在任何函数外的顶层声明，那么这个变量就属于全局作用域。举例说明：

var a = 1;  //此处声明的变量a为全局变量
function foo() {
   var a = 2;  //此处声明的变量a为函数foo的局部变量
   console.log(a);  //2
}
foo();
console.log(a);  //1

如果在声明变量时，省略var的话，该变量就会变成全局变量，如全局作用域中存在该变量，就会更新其值。如：

var a = 1;  //此处声明的变量a为全局变量
function foo(){
   a = 2;  //此处的变量a也是全局变量
   console.log(a);  //2
}
foo();
console.log(a);  //2

注意：var声明的变量存在提升（hoisting）。

三、提升

提升是指无论var出现在一个作用域的哪个位置，这个声明都属于当前的整个作用域，在其中到处都可以访问到。注意只有变量声明才会提升，对变量赋值并不会提升。如下例所示：

1 2	console.log(a); //undefined var a = 1;

该代码段跟下列代码段是一样的逻辑：

1
2
3

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

而如果对未声明过的变量进行操作，就会报错

1	console.log(b); //假设b未声明过，Uncaught ReferenceError: b is not defined

四、let

let声明的变量，具有如下几个特点：

let声明的变量具有块作用域的特征。
在同一个块级作用域，不能重复声明变量。
let声明的变量不存在变量提升，换一种说法，就是let声明存在暂时性死区（TDZ）。

如下面几个例子所示

let a = 1;
console.log(a);  //1
console.log(b);  //Uncaught ReferenceError: b is not defined
let b = 2;

function foo() {
  let a = 1;
  let a = 2;  //Uncaught SyntaxError: Identifier 'a' has already been declared
}

以下是一个经典的关于var和let的一个例子：

for (var i = 0; i < 10; i++) {
  setTimeout(function(){
    console.log(i);
  }, 100)
};

该代码运行后，会在控制台打印出10个10.若修改为：

for (let i = 0; i < 10; i++) {
  setTimeout(function(){
    console.log(i);
  }, 100)
};

则该代码运行后，就会在控制台打印出 0 1 2 … 7 8 9。

五、const

const声明方式，除了具有let的上述特点外，其还具备一个特点，即const定义的变量，一旦定义后，就不能修改，即const声明的为常量。
例如：

const a = 1;
console.log(a);  //1
a = 2;
console.log(a);  //Uncaught TypeError: Assignment to constant variable.

但是，并不是说const声明的变量其内部内容不可变，如：

const obj = { a: 1, b: 2 };
console.log(obj.a);  //1
obj.a = 3;
console.log(obj.a);  //3

所以准确的说，是const声明创建一个值的只读引用。但这并不意味着它所持有的值是不可变的，只是变量标识符不能重新分配。

六、总结

var声明的变量属于函数作用域，let和const声明的变量属于块级作用域；
var存在变量提升现象，而let和const没有此类现象；
var变量可以重复声明，而在同一个块级作用域，let变量不能重新声明，const变量不能修改。