文章内容由http://www.2cto.com/kf/201401/273825.html和内容整合而成

JavaScript是一种描述型脚本语言，它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行。如果你不能理解javaScript语言的运行机制，或者简单地说，你不能掌握javascript的执行顺序，那你就犹如伯乐驾驭不了千里马，让千里马脱缰而出，四处乱窜。

那么JavaScript是怎么来进行解析的吗？它的执行顺序又是如何的呢？在了解这些之前，我们先来认识几个重要的术语：

1、代码块

1. <script type="text/javascript">  
2. "这是代码块一");  
3. </script>  
4. <script type="text/javascript">  
5. "这是代码块二");  
6. </script>



JS是按照代码块来进行编译和执行的，代码块间相互独立，但变量和方法共享。什么意思呢? 举个例子，你就明白了： 


1. <script type="text/javascript">  
2. //因为没有定义str，所以浏览器会出错，下面的不能运行
3. "我是代码块一");//没有运行到这里
4. var test = "我是代码块一变量";  
5. </script>  
6. <script type="text/javascript">  
7. "我是代码块二"); //这里有运行到
8. //弹出"我是代码块一变量"
9. </script>

  



上面的代码中代码块一中运行报错，但不影响代码块二的执行，这就是代码块间的独立性，而代码块二中能调用到代码一中的变量，则是块间共享性。



2、声明式函数与赋值式函数


    1. <script type="text/javascript">  
2. function Fn(){ //声明式函数
3.                
4.      }  
5.            
6. var Fn = function{  //赋值式函数
7.                
8.      }  
9. </script>


    3、预编译期与执行期

    事实上，JS的解析过程分为两个阶段：预编译期(预处理)与执行期。


    预编译期JS会对本代码块中的所有声明的变量和函数进行处理（类似与C语言的编译），但需要注意的是此时处理函数的只是声明式函数，而且变量也只是进行了声明但未进行初始化以及赋值（即只是分配了内存）。




    1. 举个例子：  




      1. <script type="text/javascript">    
2. var
3. var b=true;    
4. function
5.     alert(a);    
6.     alert(b);    
7. false;    
8.     alert(b);    
9. var
10.     alert(a/2);    
11.     alert(++Math.PI);    
12.     alert(Math.PI++);    
13. }    
14. test();  
15. </script>


      这段代码执行后的效果就是首先弹出undefined、然后弹出true，接着再弹出其他，也就是说，第一行alert（a）执行时，a并未赋值，而b已被赋值为了true。这是为什么？涉及到两个知识点：


      1、变量的作用域


      2、js代码的执行顺序


      首先，js要预编译，预编译的过程中，为每个变量分配了内存。

      下面javascript代码的执行结果是 js代码执行顺序简单介绍_js



      第二步，按照代码的顺序执行代码：


      第一行，为全局变量a赋值


      第二行为局部变量b赋值


      第三行进入了函数test，则由于局部变量会在函数内部覆盖同名的全局变量,故此时的状态便是a未赋值，b的值为true


      第四行，弹出a值，此时未赋值的a当然要弹出undefined啦。



      注意，当我们仅仅定义了函数，而未调用时，函数只是被声明而已，并不执行，比如以下代码： 


      1. function loadEvent(){  
2. a=5;  
3. b=10;  
4. a=[a,b];  
5. b=a[0];  
6. a=a[1];  
7. alert("a:"+a+",b:"+b);  
8.  }  
9.      
10. </script>
11. </head>
12. <body >
13.    
14. <div id="divTest">
15.       
16. </div>
17. <button aa="aaa" click="noRepeat">delete</button >
18.   
19. </body>
20. </html>



        1. </pre><div>由于并未调用loadEvent函数，网页上并无弹出的效果，只有当我们调用了函数，比如：</div><div><pre class="html" name="code"><body onload="loadEvent()">
2.   
3. <div id="divTest">
4.   
5. </div>
6. <button aa="aaa" click="noRepeat">delete</button >
7.   
8. </body>




        此时才会在浏览器上显示弹出效果。


        现在，让我们来总结整理下：




        step 1. 读入第一个代码块。




        step 2. 做语法分析，有错则报语法错误（比如括号不匹配等），并跳转到step5。




        step 3. 对var变量和function定义做“预编译处理”（永远不会报错的，因为只解析正确的声明）。




        step 4. 执行代码段，有错则报错（比如变量未定义）。




        step 5. 如果还有下一个代码段，则读入下一个代码段，重复step2。




        step6. 结束。


        而根据HTML文档流的执行顺序，需要在页面元素渲染前执行的js代码应该放在前面的<script>代码块中，而需要在页面元素加载完后的js放在元素后面，body标签的onload事件是在最后执行的。