JavaScript预解析处理过程原来是这回事

讲解

一般来说，Javascript代码的执行包括两个过程：预解析处理过程 和 逐行解读过程。在代码逐行解读前，Javasript引擎需要进行代码的预处理过程。预解析处理的工作主要是变量提升和给变量分配内存，具体过程是在每个作用域中查找var声明的变量、函数定义和命名函数（函数参数），找到它们后，在当前作用域中给他们分配内存，并给他们设置初始值。预解析设置的初始值分别是：对于var声明的变量，初始值是undefined，对函数定义，变量名为函数名，函数变量的初始值为函数定义本身；对命名参数，如果函数调用时没有指定参数值，则命名参数的初始值为undefined，如果函数调用是指定了参数值，则命名参数的初始值为指定的参数值。

注：对于变量声明的同时赋值的语句，例如：var a = 9，Javascript引擎对它进行处理时把该语句分拆为两条语句：var a和a=9，其中，var a在预解析阶段进行处理，a=9是赋值表达式，在逐行解读阶段进行赋值。所以预解析中，不管变量声明时是否有赋值，变量的初始值都是undefiend。

预解析发生的时机

（1）、遇到<script>标签时

浏览器加载到<script>标签时，将使用javascript引擎对<script></script>标签对之间的代码块进行预解析：找到函数定义和函数体外的所有var声明的变量，并给它们分配内存和设置初始值。

对同名的var变量和函数变量，只会分配一次栈内存。但在堆内存中会给函数变量的初始值分配内存。对变量赋初始值时，函数变量初始值优先级高于var变量初始值，而同级别的函数变量，后定义的函数优先于先定义的函数。

所以var变量名和函数变量名相同时，如果内存中的变量的值一开始为undefined，但最终内存中该变量的初始值会替换为函数变量的值；否则变量的初始值保持不变。而同名的函数变量，后面定义的函数会替换前面定义的函数。

（2）、遇到函数时

每一对<script></script>标签中的代码预解析完后会立即逐行解读代码。在解读代码的过程中，如果遇到函数调用，此时会在函数作用域中首先进行预解析处理，预解析处理完才会执行函数代码。在函数作用域的预解析规则是：找到命名函数、所有var变量和函数定义，并给它们在函数作用域中分配内存和设置初始值。对同名的var变量、命名参数和函数变量，只会分配一次栈内存，但在堆内存中会给函数变量的初始值分配内存。对变量赋初始值时，函数变量的值优先级最高，其次是命名参数值。所以命名参数名和var变量名相同，内存中变量的值是参数值；如果命名参数名和函数变量名相同或var变量名和函数变量名相同，内存中变量的值为函数变量值。

页面中包含多个<script></script>标签时的预解析

当页面中包含多个<script></script>标签时，javascript引擎会按页面中<script></script>标签出现的顺序，从上往下对每一个<script></script>标签对之间的脚本代码块分别进行预解析和逐行解读处理。每一个<script></script>标签对之间代码的预解析是全局范围的，在函数调用时发上发生的函数代码预解析则是针对函数范围的。

需要注意的是，变量在预解析处理得到的初始值在逐行解读代码过程中会被赋值表达式（带有=，+=，-=，*=，/=，++，--等运算符号的语句）修改。

示例

我们通过几个示例来详细看一下。

预解析变量的优先级示例：

<script>  
alert("(1)该行结果是：" + a)  // 1  
var a = 3; // 2  
alert("(2)该行结果是" + a) // 3  
function a (){ // 4  
 alert(2);  
}  
var a = 6; // 5  
function a(){ // 6  
 alert(4);  
}  
alert("(3)该行结果是"+ a); // 7   
</script>

弹出框结果分别为：

1处弹出的内容：

(1)该行结果是：  
function a(){  
   alert(4);  
}

3处弹出的内容：

(2)该行结果是: 3

7处弹出的内容：

(3)该行结果是: 6

上述运行结果正是预解析和逐行解读分阶段处理的结果。Javascript引擎遇到<script></script>标签时，开始按代码出现的顺序进行预解析处理：首先预解析注释2处的var变量a，给它分配内存，并给他赋初始值为"undefined"；然后预解析注释4处的函数变量a，发现该变量和已分配内存的var变量同名，所以不再对函数变量a分配栈内存，而只给它分配堆内存存储函数定义，同时会将栈内存中的变量a的值修改为函数变量的初始值function a(){alert(2);}；再接着预解析注释5处的var变量a，该变量与前面预解析得到的函数变量a同名，所以对该变量也不再分配内存，由于函数变量值优先于var变量值，所以此时注释5处的var变量a初始值undefined不会修改内存变量的函数定义值；最后预解析注释6处的函数变量a，发现它和内存中的变量a同名，也不再给它分配内存，但会在堆中分配内存存储6处的函数定义。由于后定义的函数优先级高于前面定义的函数，此时内存的变量a的函数定义值被修改为function a(){alert(4);}。因此最终内存中的变量a的初始值为function a(){alert(4)};。至此，预解析完成。

接着进行逐行解读代码。在逐行解读代码阶段，首先解读到注释1处代码，此时会去内存中查找变量a，如果找到，读取变量a的值并输出到警告对话框中；如果没找到，将报a is not defined错误。上面的预解析的结果是内存中存在变量a，且其值为function a(){alert(4);}。注释2处的代码是一个赋值表达式：a=3，执行该代码后，会将内存中的变量a的值修改为“3”。所以执行到注释3处代码时，从内存中读取到的值为“3”。注释4处定义了一个函数，执行时会跳出函数定义不作任何操作。注释5处代码是一个赋值表达式：a=6，执行该行代码后，会将内存中的变量a的值修改为“6”。注释6处又是一个函数定义，不作解读。最后执行了注释7处的代码，从而读取到值“6”。

欢迎关注微信公众号前端历劫之路

回复关键词电子书，即可获取12本前端热门电子书。

回复关键词红宝书第4版，即可获取最新《JavaScript高级程序设计》（第四版）电子书。

关注公众号后，点击下方菜单即可加我微信，我拉拢了很多IT大佬，创建了一个技术交流、文章分享群，期待你的加入。

作者：Vam的金豆之路

微信公众号：前端历劫之路