变量提升与暂时性死区

发布时间 2023-08-06 11:55:52作者: Tursum

1. 变量提升

使用var申明变量的时候,不管变量的申明写在哪里,最后都会被提升到顶端去。
因此,我们可以先使用变量,在申明变量,却不会报错,只会输出undefined。

console.log(num)  // undefined
var num = 1;

在函数中也是一样的,在函数内部申明的变量会被提升到函数作用域的顶端。

function getNum() {
  console.log(num);   // undefined
  var num = 1;
}

事实上,JS也是有编译阶段的,它和传统语言的区别在于,JS不会早早地把编译工作做完,而是一边编译一边执行。
在这个短暂的编译阶段里,JS 引擎会搜集所有的变量声明,并且提前让声明生效。至于剩下的语句,则需要等到执行阶段、等到执行到具体的某一句的时候才会生效。这就是变量提升背后的机制。

2. 暂时性死区

按理说下面这段代码会正常运行,因为运行到me = 'lee';的时候me已经申明了,但却报错了。

var me = 'icon';
{
  me = 'lee';
  let me;
}

image
这是因为 ES6 中有明确的规定:如果区块中存在 let 和 const 命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。假如我们尝试在声明前去使用这类变量,就会报错,这就是“暂时性死区”。
这时候去掉me = 'lee';就可以正常运行了。