javascript核心技术（十七）JS中代码的运行方式/执行流程

人亦已歌

总的来讲，JS中代码的运行方式分为两个过程。
1、预编译过程： 语法检测 ->变量提升-> 函数预加载
2、执行过程：预编译通过，再一行一行从上到下执行代码

1. 预编译过程中，如果有错误（编译错误）,当前整个script/js文件中的代码不执行;继续找下一个script标签/js文件。
   
2. 执行过程中，如果有错误（执行错误），当前这个script标签/js文件中，出错之前的代码正常执行，之后的代码不执行；继续找下一个script标签/js文件。

复制代码

下面我们来看以下代码，为了方便测试，这里我们暂且将代码写入script标签中：

<script>
var num = 100;
console.log(num);
// 编译错误 因为变量名不能是数字开头,所以该script脚本根本不会执行，而是去执行下一个script，输出500
var 100abc = 200;
</script>

<script>
    console.log(500);
</script>

<script>
var num = 100;
console.log(num);
var fn;
fn(); //执行错误，fn不是函数或未定义，所以不会输出下面的300
console.log(300);
</script>

<script>
    console.log(500);
</script>

再看以下代码：

var f1 = 100;
function f1(){
    console.log(200);
}
//猜猜看，现在f1是什么
console.log(f1);

解释一下：

1. 执行代码之前，先进行变量提升，再加载函数，然后赋值。
   
2. 如果存在同名的变量名和函数名，始终是后面的覆盖前面的。

复制代码

所以，以上代码的最终执行过程是这样的

var f1;
function f1(){
    console.log(200);
}
f1 = 100;
console.log(f1);

所以结果是100

以下写法是，先定义了函数，再声明变量。
实际执行流程中，会先声明变量，后定义函数。

function f1(){
    console.log(200);
}
var f1;
console.log(f1);

所以输出结果是f1函数，如下：


以上就是关于JS中代码的运行方式及执行流程的讲解，大家务必认真理解，并亲自动手测试一下。

语儿

如梦初醒，衷心感谢！！！！！！

清风斩月

哎 ~~~~~~~~~~  默默无问两眼泪啊~~  太好了 ， 这篇文章我一定要收藏，（楼主不介意吧）  他将是将是我踏上成功的催化剂

jimmy200183

真是让人受益非浅，真希望多看到有这样的文章。  也真希望大家能多帮助我，我只是一个初学者，这篇的文章让我的平静了下来。  本以为程序设计不是什么难事。、

Luuuv

感觉得自己很愚昧,自认为自己还不错,原来我差劲得要命,多谢你的提醒.

palbert

我看了一遍  感受很深啊  很感激你给我一个动力！！！  

ftsdzy2003

写的很好，好佩服啊·  我想我会更加努力~~~~~~~~  

wittylala

8错  8错

hwl

谢谢 向你致敬~~~！

柠檬草精灵

此般教育，阿SIR说了不少，可真正受用，还是只有这文章