准备知识
首先我们知道js中有两种作用域，一是全局作用域，二是函数作用域，然而在es6引入了let之后就有了块级作用域。也就是说现在有三种作用域了。知道了作用域我们就可以来聊一下变量提升了，一般来说变量提升都是提升到变量作用域第一行。
var的变量提升
var a=1 //var 全局作用域变量
function foo(){
alert(a) //a是什么？
var a=2 //var 函数作用域变量
}
foo.call()
做这种题一般先进行转换（变量提升）：先找声明，再看代码。
提升结果如下：
找声明：var a
function foo(){
//函数里代码找声明时不看，调用时再看
var a
alert(a）
a=2
}
看代码：a=1
foo.call()//调用了，看函数代码
由上面可以看到a为undefined
let的变量提升
let 有变量提升？答案是有的，听我慢慢说。
let x = 'global'
{
console.log(x) // Uncaught ReferenceError: x is not defined
let x = 1
}
你能解释一下为什么x会报错。
能想通吗？
我们先从提升这两个字入手理解一下
提升
首先明确一点：提升不是一个技术名词。
要搞清楚提升的本质，需要理解 JS 变量的「创建create、初始化initialize 和赋值assign」
有的地方把创建说成是声明（declare），为了将这个概念与变量声明区别开，我故意不使用声明这个字眼。
有的地方把初始化叫做绑定（binding），但我感觉这个词不如初始化形象。
var 声明的「创建、初始化和赋值」过程
function fn(){
var x = 1
var y = 2
}
fn()
在执行 fn 时，会有以下过程（不完全）：
- 进入 fn，为 fn 创建一个环境。
- 找到 fn 中所有用 var 声明的变量，在这个环境中「创建」这些变量（即 x 和 y）。
- 将这些变量「初始化」为 undefined。
- 开始执行代码
x = 1 将 x 变量「赋值」为 1
y = 2 将 y 变量「赋值」为 2
也就是说 var 声明会在代码执行之前就将「创建变量，并将其初始化为 undefined」。
这就解释了为什么在 var x = 1 之前 console.log(x) 会得到 undefined。
function 声明的「创建、初始化和赋值」过程
fn2()
function fn2(){
console.log(2)
}
JS 引擎会有一下过程：
1.找到所有用 function 声明的变量，在环境中「创建」这些变量。
2.将这些变量「初始化」并「赋值」为 function(){ console.log(2) }。
3.开始执行代码 fn2()
也就是说 function 声明会在代码执行之前就「创建、初始化并赋值」。
let 声明的「创建、初始化和赋值」过程
{
let x = 1
x = 2
}
我们只看 {} 里面的过程：
1.找到所有用 let 声明的变量，在环境中「创建」这些变量
2.开始执行代码（注意现在还没有初始化）
3.执行 x = 1，将 x 「初始化」为 1（这并不是一次赋值，如果代码是 let x，就将 x 初始化为 undefined）
3.执行 x = 2，对 x 进行「赋值」
这就解释了为什么在 之前let x 之前使用 x 会报错：
let x = 'global'{
console.log(x) // Uncaught ReferenceError: x is not defined
let x = 1
}
原因有两个
- console.log(x) 中的 x 指的是下面的 x，而不是全局的 x
- 执行 log 时 x 还没「初始化」，所以不能使用（也就是所谓的暂时死区）
总的来说：
- let 的「创建」过程被提升了，但是初始化没有提升。
- var 的「创建」和「初始化」都被提升了。
- function 的「创建」「初始化」和「赋值」都被提升了。
也就是提升的东西一步步变多了。
讲了这么多我们顺便来总结一下let的特点
let的5个特点
let 块级作用域变量
let无法重复声明
-
let和for循环配合会有神奇现象
var liList = document.querySelectorAll('li') // 共5个li for( let i=0; i<liList.length; i++){ liList[i].onclick = function(){ console.log(i)///为何分别打印出 0、1、2、3、4，把let 改成var 就是打印出5个4？ } }原因
- for( let i = 0; i< 5; i++) 这句话的圆括号之间，有一个隐藏的作用域
- for( let i = 0; i< 5; i++) { 循环体 } 在每次执行循环体之前，JS 引擎会把 i 在循环体的
上下文中重新声明及初始化一次。
上面代码等价于
var liList = document.querySelectorAll('li') // 共5个li for( let i=0; i<liList.length; i++){ let i = 隐藏作用域中的i // 看这里看这里看这里 liList[i].onclick = function(){ console.log(i) } }这时:let i 保留的隐藏作用域中的 i 的值，所以在后者变化的时候，前者并不会变化。
而console.log 的是前者，所以不会出现分别打印出 0、1、2、3、4 let 会提升，提升到block（块级作用域）第一行
但是有TDZ(临时死亡区域），let声明之前区域不能使用。
参考文章：https://zhuanlan.zhihu.com/p/28140450?utm_medium=social&utm_source=qq
