JavaScript中怎么实现预解析处理

这期内容当中小编将会给大家带来有关JavaScript中怎么实现预解析处理，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

1.预解析发生的时机

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

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

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

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

(2)、遇到函数时

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

2.页面中包含多个<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”。

上述就是小编为大家分享的JavaScript中怎么实现预解析处理了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。