深入理解JavaScript的执行顺序与运行机制

JavaScript运行机制概述

若无法掌握JavaScript的运行机制，尤其是执行顺序，就如同伯乐无法驾驭千里马，导致程序失控。

那么，JavaScript是如何解析代码的？其执行顺序遵循什么规则？在深入探讨之前，我们需要先明确几个核心概念。

代码块的独立性与共享性

1、代码块：JavaScript中的代码块是指由<script>标签分隔开的独立代码段。例如：

<script type="text/javascript">
alert("这是代码块一");
</script>
<script type="text/javascript">
alert("这是代码块二");
</script>

JavaScript引擎是按代码块为单位进行编译和执行的。不同代码块之间相互独立，但变量和方法在它们之间是共享的。为了便于理解，请看以下示例：

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

在上述代码中，代码块一发生错误并不会影响代码块二的执行，这体现了代码块间的独立性。同时，代码块二能够调用到代码块一中定义的变量，这体现了块间共享性。

函数定义类型与预编译机制

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

JavaScript中的函数定义主要分为两种：声明式函数和赋值式函数。

<script type="text/javascript">
function Fn(){ //声明式函数
     }
var Fn = function{ //赋值式函数
     }
</script>

这两类函数的关键区别在于：在JavaScript的预编译阶段，声明式函数会被优先提取出来，随后才按顺序执行JavaScript代码。

预编译期与执行期的区别

3、预编译期与执行期

实际上，JavaScript的解析过程分为两个阶段：预编译期（预处理）与执行期。

在预编译期，JavaScript会对当前代码块中的所有变量声明和函数声明进行处理（类似于C语言的编译过程）。但需要注意的是，此时仅处理声明式函数，且变量仅完成声明，并未进行初始化或赋值。

<script type="text/javascript">
Fn(); //执行结果："执行了函数2",同名函数后者会覆盖前者
function Fn(){ //函数1
alert("执行了函数1");
     }
function Fn(){ //函数2
alert("执行了函数2");
     }
</script>
<script type="text/javascript">
Fn(); //执行结果："执行了声明式函数",在预编译期声明函数及被处理了，所以即使Fn()调用函数放在声明函数前也能执行。
function Fn(){ //声明式函数
alert("执行了声明式函数");
      }
var Fn = function(){ //赋值式函数
alert("执行了赋值式函数");
      }
</script>
//代码块一
<script type="text/javascript">
 alert(str);//浏览器报错,但并没有弹出信息窗
</script>
//代码块二
<script type="text/javascript">
 alert(str); //弹窗"undefined"
 var str = "aaa";
</script>
//js在预处理期对变量进行了声明处理,但是并没有进行初始化与赋值，所以导致代码块二中的变量是unfiened的，而代码一中的变量是完全不存在的，所以浏览器报错。

跨代码块函数调用的误区解析

理解了上述术语后，相信大家对JavaScript的运行机制已有了初步认识。接下来，我们通过一个具体例子来进一步分析：

<script type="text/javascript">
Fn(); //浏览器报错:"undefined"
</script>
<script type="text/javascript">
function Fn(){ //函数1
alert("执行了函数1");
      }
</script>

为什么运行上述代码会导致浏览器报错？既然声明函数会在预处理期被处理，为何还会找不到Fn()函数？这其实是一个常见的理解误区。前文提到JavaScript引擎是按代码块顺序执行的，更准确地说，是逐代码块进行预处理和执行。也就是说，预处理的范围仅限于当前正在执行的代码块中的声明函数和变量。对于尚未加载的代码块，引擎无法进行预处理，这也是“边编译边执行”机制的核心所在。

JavaScript执行流程总结

现在，让我们对JavaScript的执行流程进行总结：

step 1. 读入第一个代码块。
step 2. 做语法分析，有错则报语法错误（比如括号不匹配等），并跳转到step5。
step 3. 对var变量和function定义做“预编译处理”（永远不会报错的，因为只解析正确的声明）。
step 4. 执行代码段，有错则报错（比如变量未定义）。
step 5. 如果还有下一个代码段，则读入下一个代码段，重复step2。
step6. 结束。

HTML文档流与脚本放置建议

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

<script type="text/javascript">
alert("first");
function Fn(){
alert("third");
    }
</script>
<body onload="Fn()">
</body>
<script type="text/javascript">
alert("second");
</script>