js解析器的执行原理
Posted 兔子先生
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js解析器的执行原理相关的知识，希望对你有一定的参考价值。
首先看一段代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <span>我是span</span> <script type="text/javascript"> alert(cnt); var cnt=60; function huoqu(){ } </script> </body> </html>
代码的执行顺序是从上往下的，当代码执行到script标签时，也就开始执行js代码了。
执行js代码一般分两步：1.预解析代码。 2.逐行执行代码。
第一步：预解析代码
预解析代码呢，主要会把var , function , 参数等一些东西 存储进仓库里面(内存)。
1.var 一般用于声明变量，预解析代码的时候，等号后面的赋值过程不会执行，所以预解析时的var 变量 都是未定义的。
2,.function 函数呢，预解析的时候，值就是函数里面的内容。
当变量和函数重名时：就只留下函数的值，不管顺序谁前谁后。所以函数的优先级比变量高。注意：这只是预解析。
当函数和函数重名时：会留下后面那个，会遵循上下文机制。
第二步：逐行执行代码
当预解析完成之后，就开始逐行执行代码了，全部代码都会完整的执行。
实例：下面的alert分别会弹出什么值
1 <script> 2 alert(a); 3 var a=1; 4 function a(){alert(2);} 5 alert(a); 6 var a=3; 7 alert(a); 8 function a(){alert(4);} 9 alert(a); 10 </script>
第一步：预解析
上面说过，预解析时只会把var , function ,参数等存储起来，所以：
执行到第二行时，a 的值是未定义。
执行到第四行时，a 的值是函数本身，也就是function a(){alert(2);}。
执行到第六行时，a 的值还是第四行时的值，也就是function a(){alert(2);}，因为函数的优先级比变量高。
执行到第八行时，a 的值就变成了function a(){alert(4);} ,因为当两个函数重名时，遵循代码从上往下执行。
第二步：代码逐行执行
预解析完成之后，就是代码逐行执行了，
第二行：会弹出function a(){alert(4);} ，因为预解析完成之后，被存进内存的a 的值就是function a(){alert(4);}
第三行：第三行里有表达式，a 被赋了一个新的值1 表达式会改变变量的值。表达式可以改变预解析的值。
第四行：只是函数的声明，并没有用到表达式，而且也没有函数的调用，所以不会改变a 的值。
第五行：因为a 的值没有变化，所以还是1
第六行：使用了表达式，a 被赋了一个新的值3
第七行：会弹出3
第八行：函数的声明，不会改变a 的值。
第九行：a的值没有改变，所以还是3
最后结果为：
<script> 2 alert(a);//弹出function a(){alert(4)} 3 var a=1; 4 function a(){alert(2);} 5 alert(a);//弹出1 6 var a=3; 7 alert(a);//弹出3 8 function a(){alert(4);} 9 alert(a);//弹出3 10 </script>
以上是关于js解析器的执行原理的主要内容，如果未能解决你的问题，请参考以下文章