Javascript var 和 let 区别 【作用域的角度】

在目前的前端开发中，let 和 const 被越来越多的使用。但是ES6 的 const 和 let到底有什么区别， 变量提升又是什么鬼东西？ 本文主要介绍let 和 var 的区别和变量提升的奥秘。

var 带来的麻烦

先来看一道前些年很流行的面试题：
var data =[]
function doSomething () {
for (var i = 0; i < 5; i++) {
data[i] = function() {
console.log(i);
}
}
}
doSomething()
data[0] ()
data[1] ()
data[2] ()
data[3] ()

很多人会告诉我答案说： 很简单，都是 5
为什么会这样呢？

如果知道答案原因的请跳过这段：

---

如果了解作用域链的你，肯定明白在data[0]，data[1]，data[2]，data[3] 执行的时候，会产生作用域链如下：
以 data[0] 为例，
data[0]Context{
AO: {
arguments:{}
}
scope: AO, doSomething.AO, globalObject,
this: undefined
}

因此在执行 console.log(i)的时候，在自己的AO中是找不到的，去父级作用域中查找，找到了i ，此时循环已经结束， i = 5,所以函数的执行结果都是 5.
不明白 作用域链的请参考这篇blog.
https://blog.csdn.net/qcl006007/article/details/103768494

---

回到正题
如何解决这个麻烦，可以利用立即执行函数，或者作为参数传入，网上有很多答案，这里就不详细说了。

let 的解决方案

聪明的你一定想到了，没错var带来的麻烦，let完美的给它解决了， 因此代码变为；

var data =[]
function doSomething () {
for (let i = 0; i < 5; i++) {
data[i] = function() {
console.log(i);
}
}
}
doSomething()
data[0] ()
data[1] ()
data[2] ()
data[3] ()
此时输出结果为 ：0 ，1，2，3 大家可以试验一下。

为什么呢？
因为 let 为我们带来了 块级作用域， 在每次循环执行的时候，都产生了 一个块级作用域，保存了不同的 i 值，因此之后 data[3] ()执行的时候，作用域链是；
scope: AO, block, doSomething.AO, globalObject,
因此输出结果为 ：0 ，1，2，3。

结论：
let 和 const 定义变量的作用域都是离变量最近的那个块内；
var 定义变量的作用域是 离变量最近的那个方法内。