- javascript运行机制之执行顺序详解
JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行。如果你不能理解javaScript语言的运行机制,或者简单地说,你不能掌握javascript的执行顺序,那你就犹如伯乐驾驭不了千里马,让千里马脱缰而出,四处乱窜。
那么JavaScript是怎么来进行解析的吗?它的执行顺序又是如何的呢?在了解这些之前,我们先来认识几个重要的术语:
1、代码块
JavaScript中的代码块是指由<script>标签分割的代码段。例如:
1
2
3
4
5
6
|
<script type=
"text/javascript"
>
alert(
"这是代码块一"
);
</script>
<script type=
"text/javascript"
>
alert(
"这是代码块二"
);
</script>
|
JS是按照代码块来进行编译和执行的,代码块间相互独立,但变量和方法共享。什么意思呢? 举个例子,你就明白了:
1
2
3
4
5
6
7
8
9
|
<script type=
"text/javascript"
>
alert(str);
//因为没有定义str,所以浏览器会出错,下面的不能运行
alert(
"我是代码块一"
);
//没有运行到这里
var test =
"我是代码块一变量"
;
</script>
<script type=
"text/javascript"
>
alert(
"我是代码块二"
);
//这里有运行到
alert(test);
//弹出"我是代码块一变量"
</script>
|
2、声明式函数与赋值式函数
JS中的函数定义分为两种:声明式函数与赋值式函数。
1
2
3
4
5
6
7
8
9
|
<script type=
"text/javascript"
>
function Fn(){
//声明式函数
}
var Fn = function{
//赋值式函数
}
</script>
|
3、预编译期与执行期
事实上,JS的解析过程分为两个阶段:预编译期(预处理)与执行期。
预编译期JS会对本代码块中的所有声明的变量和函数进行处理(类似与C语言的编译),但需要注意的是此时处理函数的只是声明式函数,而且变量也只是进行了声明但未进行初始化以及赋值。
1
2
3
4
5
6
7
8
9
10
|
<script type=
"text/javascript"
>
Fn();
//执行结果:"执行了函数2",同名函数后者会覆盖前者
function Fn(){
//函数1
alert(
"执行了函数1"
);
}
function Fn(){
//函数2
alert(
"执行了函数2"
);
}
</script>
|
1
2
3
4
5
6
7
8
9
10
|
<script type=
"text/javascript"
>
Fn();
//执行结果:"执行了声明式函数",在预编译期声明函数及被处理了,所以即使Fn()调用函数放在声明函数前也能执行。
function Fn(){
//声明式函数
alert(
"执行了声明式函数"
);
}
var Fn = function(){
//赋值式函数
alert(
"执行了赋值式函数"
);
}
</script>
|
1
2
3
4
5
6
7
8
9
10
|
//代码块一
<script type=
"text/javascript"
>
alert(str);
//浏览器报错,但并没有弹出信息窗
</script>
//代码块二
<script type=
"text/javascript"
>
alert(str);
//弹窗"undefined"
var str =
"aaa"
;
</script>
//js在预处理期对变量进行了声明处理,但是并没有进行初始化与赋值,所以导致代码块二中的变量是unfiened的,而代码一中的变量是完全不存在的,所以浏览器报错。
|
1
2
3
4
5
6
7
8
|
<script type=
"text/javascript"
>
Fn();
//浏览器报错:"undefined"
</script>
<script type=
"text/javascript"
>
function Fn(){
//函数1
alert(
"执行了函数1"
);
}
</script>
|
现在,让我们来总结整理下:
step 1. 读入第一个代码块。
step 2. 做语法分析,有错则报语法错误(比如括号不匹配等),并跳转到step5。
step 3. 对var变量和function定义做“预编译处理”(永远不会报错的,因为只解析正确的声明)。
step 4. 执行代码段,有错则报错(比如变量未定义)。
step 5. 如果还有下一个代码段,则读入下一个代码段,重复step2。
step6. 结束。
而根据HTML文档流的执行顺序,需要在页面元素渲染前执行的js代码应该放在前面的<script>代码块中,而需要在页面元素加载完后的js放在元素后面,body标签的onload事件是在最后执行的。
1
2
3
4
5
6
7
8
9
10
11
12
|
<script type=
"text/javascript"
>
alert(
"first"
);
function Fn(){
alert(
"third"
);
}
</script>
<script type=
"text/javascript"
>
alert(
"second"
);
</script>
|