详细分析ES6中let与var变量提升的区别

今天在知乎看到一篇讲解let跟var的文章,我认为关于let不会变量提升问题存疑，于是乎想自己写一篇文章结合理论实践给各位更清晰的区别开let跟var的变量提升问题。（观点基于我的实践，如有错还请大佬们指点，纯属探讨）

 

let跟var 大部分人的第一反应肯定作用域问题，var没有块级作用域，而let拥有块级作用域。这个也是我们最熟悉的一个特性，其实它们对于变量提升的处理也是不一样的。

先导知识：每个function都有自己的作用域

理解：下面结合我在牛客网刷过的一道题来分析变量提升以及作用域问题：

从上至下分析，先从顶级作用域里定义了a跟b，这里考察的点我认为在于function内部的语句：var a=b=3;这里实际可以拆分为：b = 3;var a = b;所以b是一个全局变量。因为变量提升的问题，所以我将整个函数重写一遍让你们更直观的看到实际的函数：

以从上至下alert的分别为： undefined,undefined,3,3,undefined,3

好，作用域大致理解了，下面讲一下老生常谈的变量提升问题了，从作用域的例子里我们已经在函数内部看到了变量提升了，众所周知js变量是会提升的，所以今天看到说let不会变量提升后我就特意去测试了一下，一眼看下去好像没什么错误，他给出的例子大概是：

但是我认为导致出错的原因是let 定义仅仅提升变量，而不会自动赋值undefined

先说在我的观点中为什么先用后let会报错而先用后var不会报错：

var 定义变量提升的同时会直接赋值一个undefined，而let定义变量是单纯的declare，不赋任何值。再往上翻看一眼我给你们写的变量提升的图片里就var的定义同时赋值了undefined。

将上面的题稍微改变一下，换成let会怎么样？这里我将alert改成console.log 在浏览器演示一遍，清晰直观

先说效果：报错

报了一个 a is not defined 的错，为什么会这样呢？同样的我将这段代码改写为提升后的版本:

这里我想表达的意思是，let定义就单纯只是定义，不会自动赋上undefined,只有当js执行到let赋值语句那里才会替变量赋值undefined

如果结论是let变量不会提升的话，原函数是不应该这么早报错的，因为他在当前作用域上找不到a就会顺着作用域链找到最外层的a，那么在函数内的最想打印出的a是已赋值的，所以会打印3才对

 

所以得出结论：let 定义变量也会提升，但是不会自动赋值一个undefined，而var定义变量的同时会自动赋值undefined。

 

用代码描述就是

转化为

 

转化为