状态提升var、let、const、暂时性死区

227 阅读2分钟

在学习es6的时候我们知道var会有变量提升的特点,而const和let不会变量提升。

我们可以在浏览器的控制台中验证var的变量提升

image.png var的变量提升是先把a声明成undefined提升到代码最前面,原来代码的位置才是真正对a进行赋值的位置。 顺序如下:

image.png

然而在后续的开发中发现const和let似乎也有某种形式的变量提升

image.png

可以看到对于后面有声明的变量和没有声明的变量编译器的报错是不同的,编译器似乎知道后面会有b的声明。

所以const和let没有变量提升这个说法是错误的,只不过它们的变量提升并不和var一样直接把变量初始化为undefined,而是把变量放在temporal dead zone(暂时性死区)里。

我们来看一下es6官方给出的暂时性死区的定义:

The variables are created when their containing Lexical Environment is
instantiated but may not be accessed inany way until the variable’s
LexicalBinding is evaluated.

翻译过来的意思就是:

当程序的控制流程在新的作用域(module function 或 block
作用域)进行实例化时,在此作用域中用let/const声明的变量会先在作用域中被创建出来,
但因此时还未进行词法绑定,所以是不能被访问的,如果访问就会抛出错误。
因此,在这运行流程进入作用域创建变量,到变量可以被访问之间的这一段时间,就称之为暂时死区。

image.png 声明一个函数返回还未初始化的变量并不会报错,但如果在变量初始化之前运行函数就会报错

image.png