三分钟了解—let声明不会变量提升与暂时性死区的原因

1,892 阅读3分钟

这篇文章大概会用三分钟的时间向同学们阐述 let声明不会进行变量提升与其具有暂时性死区的原因 (将通过词法环境对象来讲述,这一点上篇文章有提到过)

Q:是什么导致了"let"不能与它的兄弟"var"一样,能够进行变量提升?
A:词法环境对象(对词法环境对象不了解的可以看我上篇文章或查询一下有关片段或文章)

下面,我直接给同学们贴出两个例子,大家就可以迅速看出var声明和let声明的不同

使用var声明

image.png

结果

image.png

使用let声明

image.png

结果

image.png

直接在这里翻译出错误原因:

image.png 凭什么?凭什么var声明的变量可以提前访问到(虽然是undefined),而let声明的却不能提前访问,这背后的原因究竟是什么?

用词法环境对象来解释这种原因

其实let与var一样也存在着“变量提升”这种行为,但是我们要清楚,变量的创建,初始化,赋值是三个不同的过程,在JS编译的词法分析过程中,会创建一个名叫词法环境对象的规范对象(它仅仅是存在于编程语言规范中的“理论上”存在的,用于描述事物如何运作的对象。我们无法在代码中获取该对象并直接对其进行操作。),它会扫描当前执行的脚本/函数/代码块,将所有声明的变量,函数,参数全都填充为自己的属性(之后要访问这些变量时直接到词法环境对象中的属性中查找,即查找脚本/函数中的变量就是查找其词法环境对象的属性)。用var声明的变量会同时提升自己的创建和初始化阶段,即在词法环境对象填充变量时即将变量初始化为undefined。而let声明的变量仅仅是提升了自己的创建阶段,并没有提升自己的初始化阶段(与var声明的区别),ES6中规定了let声明的变量的初始化阶段是在执行上下文的执行阶段而非创建阶段(即直到它们的定义被执行时才开始初始化)

我帮大家找到了这方面的说明,并进行了翻译

image.png

不想看说明的可以看一下我下面的小结(毕竟说明中写的比较抽象,不想看的小伙伴看我下面的小结就好,一样的)

小结:

1.var声明的变量在词法分析阶段(执行上下文创建阶段)就会完成创建和初始化(undefined),因此在代码执行阶段,就可以在声明前使用
2.let声明的变量在词法分析阶段(执行上下文创建阶段)会完成创建但不会初始化,如果在其定义之前使用,就是使用了未被初始化的变量,会报怎么样的错误我上面也已经贴出来了并进行了翻译。

看到这的同学请点个赞,书写不易,给点鼓励!