文章内容由http://www.2cto.com/kf/201401/273825.html和http://www.cnblogs.com/rubylouvre/archive/2009/08/21/1551270.html内容整合而成
JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行。如果你不能理解javaScript语言的运行机制,或者简单地说,你不能掌握javascript的执行顺序,那你就犹如伯乐驾驭不了千里马,让千里马脱缰而出,四处乱窜。
那么JavaScript是怎么来进行解析的吗?它的执行顺序又是如何的呢?在了解这些之前,我们先来认识几个重要的术语:
1、代码块
- <script type="text/javascript">
- alert("这是代码块一");
- </script>
- <script type="text/javascript">
- alert("这是代码块二");
- </script>
JS是按照代码块来进行编译和执行的,代码块间相互独立,但变量和方法共享。什么意思呢? 举个例子,你就明白了:
- <script type="text/javascript">
- alert(str);//因为没有定义str,所以浏览器会出错,下面的不能运行
- alert("我是代码块一");//没有运行到这里
- var test = "我是代码块一变量";
- </script>
- <script type="text/javascript">
- alert("我是代码块二"); //这里有运行到
- alert(test); //弹出"我是代码块一变量"
- </script>
上面的代码中代码块一中运行报错,但不影响代码块二的执行,这就是代码块间的独立性,而代码块二中能调用到代码一中的变量,则是块间共享性。
2、声明式函数与赋值式函数
JS中的函数定义分为两种:声明式函数与赋值式函数。
声明式函数与赋值式函数的区别在于:在JS的预编译期,声明式函数将会先被提取出来,然后才按顺序执行js代码。
- <script type="text/javascript">
- function Fn(){ //声明式函数
- }
- var Fn = function{ //赋值式函数
- }
- </script>
3、预编译期与执行期
事实上,JS的解析过程分为两个阶段:预编译期(预处理)与执行期。预编译期JS会对本代码块中的所有声明的变量和函数进行处理(类似与C语言的编译),但需要注意的是此时处理函数的只是声明式函数,而且变量也只是进行了声明但未进行初始化以及赋值(即只是分配了内存)。
- 举个例子:
- <script type="text/javascript">
- var a=100;
- var b=true;
- function test(){
- alert(a);
- alert(b);
- b=false;
- alert(b);
- var a=200;
- alert(a/2);
- alert(++Math.PI);
- alert(Math.PI++);
- }
- test();
- </script>
这段代码执行后的效果就是首先弹出undefined、然后弹出true,接着再弹出其他,也就是说,第一行alert(a)执行时,a并未赋值,而b已被赋值为了true。这是为什么?涉及到两个知识点:
1、变量的作用域
2、js代码的执行顺序
首先,js要预编译,预编译的过程中,为每个变量分配了内存。
第二步,按照代码的顺序执行代码:
第一行,为全局变量a赋值
第二行为局部变量b赋值
第三行进入了函数test,则由于局部变量会在函数内部覆盖同名的全局变量,故此时的状态便是a未赋值,b的值为true
第四行,弹出a值,此时未赋值的a当然要弹出undefined啦。
注意,当我们仅仅定义了函数,而未调用时,函数只是被声明而已,并不执行,比如以下代码:
- function loadEvent(){
- var a=5;
- var b=10;
- a=[a,b];
- b=a[0];
- a=a[1];
- alert("a:"+a+",b:"+b);
- }
- </script>
- </head>
- <body >
- <div id="divTest">
- </div>
- <button aa="aaa" click="noRepeat">delete</button >
- </body>
- </html>
- </pre><div>由于并未调用loadEvent函数,网页上并无弹出的效果,只有当我们调用了函数,比如:</div><div><pre class="html" name="code"><body onload="loadEvent()">
- <div id="divTest">
- </div>
- <button aa="aaa" click="noRepeat">delete</button >
- </body>
此时才会在浏览器上显示弹出效果。
现在,让我们来总结整理下:
step 1. 读入第一个代码块。
step 2. 做语法分析,有错则报语法错误(比如括号不匹配等),并跳转到step5。
step 3. 对var变量和function定义做“预编译处理”(永远不会报错的,因为只解析正确的声明)。
step 4. 执行代码段,有错则报错(比如变量未定义)。
step 5. 如果还有下一个代码段,则读入下一个代码段,重复step2。
step6. 结束。
而根据HTML文档流的执行顺序,需要在页面元素渲染前执行的js代码应该放在前面的<script>代码块中,而需要在页面元素加载完后的js放在元素后面,body标签的onload事件是在最后执行的。