深入理解JavaScript变量提升与时间死区

JavaScript执行流程概述

前言

脚本执行流程的第一步是代码编译，随后才是代码的实际执行，具体过程可参考相关示意图。

在编译优化层面，脚本并非一次性全部编译完成。当函数被调用执行时，JavaScript引擎会先对该函数进行编译，然后再执行其内部代码，这一机制如图所示。

• 编译阶段主要经历词法分析、语法分析生成抽象语法树（AST）以及代码生成。在此阶段，引擎仅扫描并提取环境中的声明变量和函数声明，以便预先分配内存。所有函数声明和变量声明都会被添加到名为Lexical Environment（词法环境）的JavaScript内部数据结构中，这使得它们可以在源代码实际声明位置之前被引用。需要注意的是，JavaScript在内存中仅存储函数和变量的声明标识，并不存储其具体值。
• 进入执行阶段后，若给变量x赋值，引擎首先会查询内存中是否存在变量x。如果存在，则直接为其赋值；如果不存在，则先在内存中创建变量x，然后再进行赋值操作。

变量提升机制详解

变量提升

如示意图左侧灰色区域所示，这演示了函数执行前的编译阶段：引擎先提取所有声明的变量和函数，并完成内存分配。随后开始执行代码，当执行第一行代码时，若变量a已存在于内存中（即已被提升），则直接为a赋值。而执行到第二行时，若变量b尚未在内存中创建，引擎则会先创建变量b并为其赋值。

Lexical Environment（词法环境）是一种包含标识符到变量值映射关系的数据结构。

LexicalEnviroment = {
 Identifier: <value>,
 Indentifier: <function object>
}

简而言之，Lexical Environment是程序执行过程中变量和函数实际存在的位置。

let与const的时间死区

关于let和const变量的行为

console.log(a)
let a = 3;

输出结果

ReferenceError: a is not defined

那么，let和const变量是否真的不会被提升呢？

答案相对复杂。在JavaScript中，所有的声明（包括function、var、let、const和class）都会被提升。然而，var声明会被undefined值初始化，而let和const声明的值在初始阶段仍处于未初始化状态。

它们的值仅在JavaScript引擎运行到源代码中声明该变量的位置时才会被初始化。这意味着，在引擎计算并赋值之前，你无法访问该变量。这种现象被称为时间死区（Temporal Dead Zone），即变量在创建和初始化之间的这段时间内，访问该变量是非法的。

如果JavaScript引擎在声明它们的行中找不到let或const的值，它将为它们分配undefined值（对于let）或返回错误（对于const）。

6a9a50532bf60f5fac6b3c.png](evernotecid://F2BCA3B5-CC5A-4EB3-BD61-DD865800F342/appyinxiangcom/10369121/ENResource/p1163)

let a;
console.log(a); // outputs undefined
a = 5;

在编译阶段，JavaScript引擎遇到变量a并将其存储在Lexical Environment中。但由于它是let变量，引擎不会为其初始化任何具体值。因此，在编译阶段，Lexical Environment的状态大致如下所示。

// 编译阶段
lexicalEnvironment = {
 a: <uninitialized>
}

此时，如果我们尝试在声明之前访问该变量，JavaScript引擎会尝试从词法环境中获取该变量的值。由于该变量处于未初始化状态，引擎将抛出一个引用错误（ReferenceError）。

在执行期间，当引擎到达变量声明所在的行时，它将尝试执行该变量的绑定。由于此时该变量尚未关联具体值，引擎会将其赋值为undefined。

// 执行阶段
lexicalEnviroment = {
 a: undefined
}

随后，undefined会被打印到控制台，接着代码将值5赋值给变量a，Lexical Environment中变量a的值也会从undefined更新为5。

functionn foo() {
console.log(a)
}

let a = 20;

foo(); 

function foo() {
console.log(a): // ReferenceError: a is not defined
}
foo();
let a = 20;

Class声明的提升行为

Class声明

与let和const声明类似，class在JavaScript中也会被提升。并且与let、const一样，class在代码执行之前会保持未初始化（uninitialized）状态。因此，class同样会受到时间死区（Temporal Dead Zone）的影响。例如，以下代码展示了这一现象。

let peter = new Person('Peter', 25); // ReferenceError: Person is not defined

console.log(peter);

class Person {
 constructor(name, age) {
 this.name = name;
 this.age = age;
 }
}

因此，要访问class，必须先声明它。

class Person {
 constructor(name, age) {
 this.name = name;
 this.age = age;
 }
}

let peter = new Person('Peter', 25); 
console.log(peter);
// Person { name: 'Peter', age: 25 }

所以在编译阶段，上述代码的Lexical Environment（词法环境）将呈现如下状态：

lexicalEnvironment = {
 Person: <uninitialized>
}

当引擎执行class声明时，它将使用具体的类定义值来初始化该类。

lexicalEnvironment = {
 Person: <Person object>
}

提升Class表达式

let peter = new Person('Peter', 25);
console.log(peter);
let Person = class {
 constructor(name, age) {
 this.name = name;
 this.age = age;
 }
}

let peter = new Person('Peter', 25); 
console.log(peter);
var Person = class {
 constructor(name, age) {
 this.name = name;
 this.age = age;
 }
}

最佳实践与建议

现在我们知道，在提升过程中，我们的代码并没有被JavaScript引擎实际移动位置。正确理解提升机制有助于避免因变量提升而产生的未来错误和混乱。为了避免像未定义变量或引用错误等可能产生的副作用，建议始终将变量声明放在各自作用域的顶部，并尽量在声明变量时立即初始化变量。

Hoisting in Modern JavaScript — let, const, and var

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对本站的支持。