原生JavaScript 运行机制中执行顺序详解

2015/04/27 15:37:18 | 作者：HTML5学堂（码匠） | 分类：JavaScript高级 | 关键词：JavaScript,代码块,编译,执行,运行机制

JavaScript 运行机制之执行顺序详解

HTML5学堂：JS的解析过程分为两个阶段：预编译期与执行期。预编译期JS会对本代码块中的所有声明的变量（var声明的变量）和函数进行处理，但需要注意的是此时处理函数的只是声明式函数，而且变量也只是进行了声明但未进行初始化以及赋值。

1、代码块

定义：JavaScript中的代码块是指由<script>标签分割的代码段。

<script>
代码块一
</script>
<script>
代码块二
</script>

定义：JS是按照代码块来进行编译和执行的，代码块间相互独立，但变量和方法共享。

<script>
var str = "代码块一";
function show(){
console.log("我是代码块一中的方法");
}
console.log(a);// 浏览器报错
</script>
<script>
var test = "代码块二";
console.log(str); // 调用代码块一中的变量
show(); // 调用代码块一中的方法
</script>

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

欢迎沟通交流~HTML5学堂

2、声明式函数与函数表达式

示例：

function show(){
//声明式函数
}
var show = function{
//函数表达式
}

两者的区别：

// 正常调用到函数
alert(sum(2, 6));
function sum(a, b) {
return a + b;
}
//执行了声明式函数，在预编译期声明函数及被处理了，所以即使sum( )调用函数放在声明函数前也能执行。
// 不能正常调用到函数，浏览器报错
alert(sum(2, 6));
var sum = function (a, b) {
return a + b;
}

解析：声明式函数与函数表达式的区别在于：在JS的预编译期，声明式函数将会先被提取出来，然后才按顺序执行js代码；函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解释执行。

3、预编译期与执行期

JS的解析过程分为两个阶段：预编译期与执行期。预编译期JS会对本代码块中的所有声明的变量（var声明的变量）和函数进行处理，但需要注意的是此时处理函数的只是声明式函数，而且变量也只是进行了声明但未进行初始化以及赋值。

示例：

function sum() {
console.log(a);
var a = 3;
console.log(a);
}sum();

结果：undefined 3

解析：预编译的时候，对声明的变量开辟了内存空间，但是没有赋值，所以变量里面的值是undefined。执行期的时候，代码是从上往下执行，没有对第一个a进行赋值，所以第一个a输出undefined。第二个a为什么会输出3？因为代码执行到var a = 3；的时候给a进行赋值了，覆盖之前undefined的值，所以a当前的值是3，所以输出的值是3。

深入探讨：

<script type="text/javascript">
show(); //浏览器报错
</script>
<script type="text/javascript">
function show(){
alert("我是另外一个代码块中的函数");
}
</script>

解析：为什么运行上面的代码浏览器会报错？声明函数不是会在预处理期就会被处理了吗，怎么还会找不到show()函数呢？其实这是一个理解误点，我们上面说了JS引擎是按照代码块来进行预处理和执行的，也就是说预处理的只是执行到的代码块的声明函数和变量，而对于还未加载的代码块，是没法进行预处理的，这也是边编译边处理的核心所在。

欢迎沟通交流~HTML5学堂