初识 let
- let 声明的变量的作用域是块级的；
- let 不能重复声明已存在的变量；
- let 有暂时死区，不会被提升。
我第一次质疑我的理解是在遇到 for 循环的时候，代码如下。
// 代码段1
var liList = document.querySelectorAll('li') // 共5个li
for( var i=0; i<liList.length; i++){
liList[i].onclick = function(){
console.log(i)
}
}
大家都知道依次点击 li 会打印出 5 个 5。如果把 var i 改成 let i，就会分别打印出 0、1、2、3、4：
// 代码段2
var liList = document.querySelectorAll('li') // 共5个li
for( let i=0; i<liList.length; i++){
liList[i].onclick = function(){
console.log(i)
}
}
然而，用我之前的知识来理解这个代码是不能自圆其说的。因为代码中依然只声明了一个 i，在 for 循环结束后，i 的值还是会变成 5 才对。
于是我去看了看 ES 文档，其中的 13.7.4.7 章节 清楚地说明了个中缘由，但是由于说得太清楚了，很多人都看不下去，不信你可以试试。
我说一下我的理解：
1. for( let i = 0; i< 5; i++) 这句话的圆括号之间，有一个隐藏的作用域
2. for( let i = 0; i< 5; i++) { 循环体 } 在每次执行循环体之前，JS 引擎会把 i 在循环体的上下文中重新声明及初始化一次。
3. 其他细节就不说了，太细碎了
也就是说上面的代码段2可以近似近似近似地理解为
// 代码段3
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 到底有没有提升
其中一个高票回答认为 JS 中所有的声明（var/let/const/function/class），都存在提升，理由是如下代码：
x = "global";
// function scope:
(function() {
x; // not "global"
var/let/… x;
}());
// block scope (not for `var`s):
{
x; // not "global"
let/const/… x;
}
我觉得他说得挺有道理的。于是我又去 MDN 和 ECMAScript 翻了翻，发现两处疑点：
- MDN 关于 let 是否存在提升的章节，被编辑了两次，第一次说存在提升，第二次说不存在提升（参考 2017 年 3 月 10 号的变更记录）。也就是说 MDN 的维护者都在这个问题上产生过分歧，更何况我们了。
- ES 文档里出现了「var/let hoisting」字样。
鉴于此，我认为应该尊重 ES 文档，认为 let 确实存在提升。只不过由于暂时死区的限制，你不能在 let x 之前使用 let（详见我的那篇 let 声明会提升（hoist）吗？）。
我们来看看 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 引擎会有一下过程：
- 找到所有用 function 声明的变量，在环境中「创建」这些变量。
- 将这些变量「初始化」并「赋值」为 function(){ console.log(2) }。
- 开始执行代码 fn2()
也就是说 function 声明会在代码执行之前就「创建、初始化并赋值」。
接下来看 let 声明的「创建、初始化和赋值」过程
{
let x = 1
x = 2
}
我们只看 {} 里面的过程：
- 找到所有用 let 声明的变量，在环境中「创建」这些变量
- 开始执行代码（注意现在还没有初始化）
- 执行 x = 1，将 x 「初始化」为 1（这并不是一次赋值，如果代码是 let x，就将 x 初始化为 undefined）
执行 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 到底有没有提升：
let 的「创建」过程被提升了，但是初始化没有提升。
- var 的「创建」和「初始化」都被提升了。
- function 的「创建」「初始化」和「赋值」都被提升了。
最后看 const，其实 const 和 let 只有一个区别，那就是 const 只有「创建」和「初始化」，没有「赋值」过程。
