Javascript 解析过程及其作用域链

叁歲伎倆 2023-06-12 09:08 5阅读 0赞

> Javascript在执行的步骤先通篇检查错误的语法，假设出现语法错误将无法执行脚本。  
> 语法无错误的情况下开始预编译，申明变量提前，值为undefined，函数体整体提前。  
> 预编译完成后将开始从上至下的原则进行解释执行，自动忽略变量声明和函数体的创建； 当变量与函数体名称重复时，后者覆盖前者，前者被回收。

语法正确

语法错误

检查语法

预编译

报错

声明提前

解析执行

其中**预编译**的过程，将`var`声明的变量提前，`Javascript`自动给值`undefined`，赋值留在原地；`function`声明的函数整体提前。

**var 变量提前**

如上代码，var 变量声明提前，则等效于

所以第一次输出`a`的值为`undefined`，当代码执行到`a = 2` 时，`a`被赋值，则第二次输出`a`的值为`2`

**function 函数体提前**

console.log(test);
    function test(){ }
    console.log(test);

由于函数体为整体提前，所以等效于

function test(){ }
    console.log(test);
    console.log(test);

所以两次输出均为 `function test(){}`  
但是相比`var` 和`function`，`var` 提前在`function`的前面

console.log(a);
    function a(){ }
    var a = 2;

如上，当`var` 和`function`的名字一样时，将`var` 声明的变量提前在`function`的前面，等效于

var a;
    function a(){ }
    console.log(a);
    a = 2;

首先`var` 申明的变量`a`被提前，值为`undefined`，然后`function`函数体提前，后值覆盖前置，`a`的值为`function a(){}`，所以输出`function a(){}`

**函数体的预编译**  
当Javascript需要执行函数是，此时函数将进行预编译，过程一致，提前的位置不同。  
每次提前的位置为当前作用域的前面。

当代码开始预编译时，首先提前`var a;` 和`function test(){....}`，作用域为window对象；  
当代码执行到`test()`时，提前申明`var a;`，作用域为`test()`函数体；  
所以三次输出分别为`undefined`，`3`，`2`。

关于作用域链，就是一个作用域里面有子级作用域，当子级作用域里没有需要的值时会向父级作用域里借用，由此形成的一种链式结构称为作用域链。

在函数体`test()` 中，自己本身不存在变量`a`，所以向自己的父级作用域里借用，所以输出结果为`2`。

> 开始执行之前，创建执行环境栈：临时保存正在执行的函数的执行环境。  
> 预编译时，创建函数对象， \[\[scope\]\]记录函数的归属，同时为后期的作用域访问范围做准备。  
> 调用函数时，ECS加入一个新的元素，记录函数的调用，同时创建体格活动对象AO，保存了本次函数调用得问局部变量，函数scope记录着parent。  
> 函数执行完成后，元素出栈，活动对象和局部变量一同释放。  
> ![作用域链][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU3OTQ0_size_16_color_FFFFFF_t_70]

其中`main()`为父作用域，`test()`为子作用域，两者的关系如图橙色部分所示，形成的链式结构为作用域链。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU3OTQ0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191111201708639.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTU3OTQ0,size_16,color_FFFFFF,t_70