JavaScript执行机制之执行顺序

╰半橙微兮° 2022-09-25 10:19 190阅读 0赞

JavaScript是一种描述型的脚本语言，不同于C\#或者java，它不需要进行编译成中间语言，而是由浏览器动态的解析和执行。今天我们就来说一个JavaScript是如何解析的，它的执行顺序是怎么样的？在此之前，我们先来了解几个术语。

## 一、代码块 ##

JavaScript中的代码块是指由`<Script>`标签分割的代码块。例如：

JavaScript是按照代码块来进行编译和执行，代码块之间相互独立，但是变量和方法共享。如下：

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

## 二、声明式函数与赋值式函数 ##

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

声明式函数和赋值式函数的区别在于：在js预编译时期，声明式函数会先被提取出来执行，然后再按顺序执行js代码。

## 三、预编译期与执行期 ##

事实上，js解析过程分为两个阶段：预编译期（预处理）与执行期。  
       预编译期js会对本地代码块中所有声明的变量和函数进行处理，需要注意的是这里处理的函数只是声明式函数，而且对于所有的变量只进行了声明，并未进行初始化和赋值。

下面来看一个例子：

上面这段代码中代码块一输出是报错了，没有定义`Fn_1`这个函数，但是在代码块二中我们已经定义这个函数了，这是为什么呢。这里有一点要特别注意一下，我们上面说JS是按照代码块的顺序来执行的，完整的说是按照代码块来进行预编译和执行的，也就是说预编译只预编译到这个代码块中声明的变量和函数，然后开始执行这个代码块。而对于后面还未加载的代码块，是没有办法预处理的，这也是边编译变处理的核心所在。

理解了上面几个术语和例子，JS的运行机制就基本上清楚了，下面我们来总结一下流程：

step 1.读入第一个代码块。
    step 2.做语法分析，有错则报语法错误（比如括号不匹配等），如果后面还有代码段就跳转到step 5。
    step 3.对var定义的变量和function定义的函数进行预编译处理（这里永远不会报错，因为JS只解析正确的声明）。
    step 4.执行代码段，有错则报错。
    step 5.如果还有下一个代码段，则读入下一个代码段，执行step 2。
    step 6.结束。

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

如有错误请指出，谢谢！