JS温故而知新之变量提升和时间死区

开始执行脚本时,执行脚本的第一步是编译代码,然后再开始执行代码,如图

JS温故而知新之变量提升和时间死区

另外,在编译优化方面来说,最开始时也并不是全部编译好脚本,而是当函数执行时,才会先编译,再执行脚本,如图

JS温故而知新之变量提升和时间死区

编译阶段:经历了词法分析,语法分析生成AST,以及代码生成。并且在此阶段,它只会扫描并且抽出环境中的声明变量,声明函数以便准备分配内存,所有的函数声明和变量声明都会被添加到名为Lexical Environment的JavaScript内部数据结构内的内存中。因此,它们可以在源代码中实际声明之前使用。但是,Javascript只会存储函数声明和变量声明在内存,并不会存储他们的值

执行阶段:给变量x赋值,首先询问内存你这有变量x吗,如果有,则给变量x赋值,如果没有则创建变量x并且给它赋值。

变量提升

如下图,左边灰色块区域,是演示函数执行前的编译阶段,先抽出所有声明变量和声明函数,并进行内存分配。然后再开始执行代码,在执行第一行代码的时候,若是变量a存在于内存中,则直接给变量a赋值。而执行到第二行时,变量b并没有在内存中,则会创建变量b并给它赋值。

JS温故而知新之变量提升和时间死区

Lexical enviroment是一种包含标识符变量映射的数据结构

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

简而言之,Lexical enviroment就是程序执行过程中变量和函数存在的地方。

let,const变量

console.log(a) let a = 3;

输出

ReferenceError: a is not defined

所以let和const变量并不会被提升吗?

这个答案会比较复杂。所有的声明(function, var, let, const and class)在JavaScript中都会被提升,然而var声明被undefined值初始化,但是let和const声明的值仍然未被初始化。

它们仅仅只在Javascript引擎运行期间它们的词法绑定被执行在才会被初始化。这意味着引擎在源代码中声明它的位置计算其值之前,你无法访问该变量。这就是我们所说的时间死区,即变量创建和初始化之间的时间,我们无法访问该变量。

如果JavaScript引擎仍然无法在声明它们的行中找到let或者const的值,它将为它们分配undefined值或返回错误值(在const的情况下会返回错误值)。

JS温故而知新之变量提升和时间死区

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

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

在编译阶段,JavaScript引擎遇到变量a并将它存储在lexical enviroment,但是因为它是一个let变量,所以引擎不会为它初始化任何值。所以,在编译阶段,lexical enviroment看起来像下面这样。

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

现在如果我们尝试在声明它之前访问该变量,JavaScript引擎将会尝试从词法环境中拿到这个变量的值,因为这个变量未被初始化,它将抛出一个引用错误。

在执行期间,当引擎到达了变量声明的行,它将试图执行它的绑定,因为该变量没有与之关联的值,因此它将为其赋值为unedfined

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

之后,undefined将会被打印到控制台,然后将值5赋值给变量a,lexical enviroment中变量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;

JS温故而知新之变量提升和时间死区

Class Declaration

就像let和const声明一样,class在JavaScript中也会被提升,并且和let,const一样,知道执行之前,它们都会保持uninitialized。因此它们同样会受到Temporal Deal 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 Expressions

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

JS温故而知新之变量提升和时间死区

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

JS温故而知新之变量提升和时间死区

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/09bc6e0080d7c3d96c7d3fe839c4cb4e.html