顶层const和底层const的理解_前端面试题——var、let和const

前端面试，总会被问到这个问题：

• JS当中的var、let和const这三者有什么区别呢？

你自信满满地答道：“let和const没有变量提升，还有。。。”

面试官打断你：“等等，let和const真的没有变量提升么？”

这个问题，对于熟悉ES6的朋友们，是很基础的问题了。但是，有一些小细节，比如使用let和const定义变量是否提升，争论还是有滴。那么，我们就一起来总结一些这个“简单”的问题。

变量提升

很多人认为，var是存在变量提升了，因此，如果你有如下代码：

console.log(foo);      // undefined
var foo = 123;

程序不会报错，而是打印出undefined。这是因为，编译器预编译的时候，第一步只会记录变量和函数的定义，第二步才会执行程序（hoisting是对一种现象的描述，而不是一种编译器具体的行为），所以程序看起来等价于下面的代码：

var foo；
console.log(foo);      // undefined
foo = 123;

再来看let是否存在变量提升：

console.log(foo);      // Uncaught ReferenceError: Cannot access 'foo' before initialization
let foo = 123;

发生了引用错误，但是这是因为let定义的变量不存在提升导致的么？

作为对照，我们直接运行下面的代码，看看会出现什么错误：

console.log(foo);      //  Uncaught ReferenceError: foo is not defined

错误原因：foo没有定义。

如果说let foo不存在变量提升，那么在运行

console.log(foo);     
let foo = 123;

也应该报出foo没有定义这个错误的，但是错误确是因为foo没有被初始化。

下面是揭示真相的时刻了：let和const定义的变量都会被提升，但是不会被初始化，不能被引用，不会像var定义的变量那样，初始值为undefined。因此，在使用console.log(foo)的时候会发生引用错误。

为什么let和const定义的变量不会被初始化呢？主要是因为const。const，顾名思义：常量，const的引用不应被改变。如果编译器把const初始化为undefined，之后，又让它等于我们定义的那个值，就改变了const的引用。因此，委员会决定let和const虽然也会发生变量提升，但是没有任何初始值。

块级作用域

var、let和const另外一个重要区别就是let和const只在块级作用域中有效，比如：

{
    var a = 'Smiley';
}
console.log(a)  	// 能正确打印出Smiley

但是：

{
    let a = 'Smiley';
}
console.log(a)    	//  报错： Uncaught ReferenceError: a is not defined

循环中i的定义

我们来看红宝书当中的一个例子：

var result = new Array();

for (var i=0; i<10; i++) {
  result[i] = function() {
    return i;
  }
}
console.log(result[0]())       // 打印10

之所以结果返回10，这是因为所有的i都使用同一个引用，而i最终会被更新为10，因此，result中所有函数都会返回10。

那么怎么修复呢？在ES6之前，最常见的修复方法是使用IIFE。但是let和const的发明让我们有了一种更简单的修复方法：

var result = new Array();

for (let i=0; i<10; i++) {
  result[i] = function() {
    return i;
  }
}
console.log(result[0]());	// 打印0

在每次循环当中，都会创建一个新的let i（因为let只在块级作用域有效，因此是不会报错的），因此result[i]使用的每个i都是不同的，值并不会像使用var的例子那样不断增加。

其他

关于var和let还有一些微小的区别，比如：

1. 暂时性死区（如果理解了JS的两步预编译，这个很容易理解）
2. let和const不允许重复声明
3. let和const不会绑定全局作用域

这些都比较容易理解，不再赘述了。

let和const之间的区别

另外一点值得注意的是，let和const之间的区别。

大家一般认为const是常量，不能被更改。但是请看下面这段代码：

const obj = {
    a: 12
}
obj.a = 1;

我们更改了obj这个const的a这个属性，但是没有任何报错。不是说const定义的变量不能被更改么？其实是const定义的变量的引用不能被更改，在上面的程序中，如果你说obj = ‘abc’，程序是会报错的。但是上面例子中，引用其实是一个指针，即使指针指向的东西改变了，但只要指针没有改变，就不会报错的。所以，建议只使用const定义简单类型的数据，定义对象还是使用let会不容易产生歧义。

希望看这篇文章，你能够充分理解var、let和const三者的区别，顺顺利利通过面试。祝大家前端学习一切顺利！

关注我的公众号：前端三剑客。分享前端面试与算法面试的分析与总结！