JavaScript的预编译过程分析

一、JavaScript概念

JavaScript ( JS ) 是一个单线程、解释型的编程语言。

二、JavaScript语言特点

2.1 单线程

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。

2.2 解释型语言

自上而下，解释一行，执行一行；不会通篇编译为一个文件再执行。

三、 JavaScript执行过程

3.1 语法分析

顾名思义就是检查一遍js代码内有没有出现语法错误（比如少些个分号，多写个括号等）；语法分析期间不会执行代码

3.2 预编译

预编译发生在函数执行的前一刻 全局下： 全局的变量声明和函数声明则会存放在全局对象内（Global Object 简称GO，它是window的一部分，你可以直接把他理解成window对象）中 函数体内： 预编译会提前把函数里的变量声明和函数声明依据规则存放在该活动对象内（Activation Object，简称AO），

预编译简单理解就是在内存中开辟一些空间，存放一些变量与函数。

预编译大致可分为4步：

创建AO(GO)对象
找形参和变量声明，将形参和变量名作为AO(GO)属性名，值为undefined
将实参值和形参统一
在函数体里面找函数声明，值赋予函数体。

所以如果遇到下面这种情况，当函数声明和变量声明名称相同时：

console.log(a);
var a= 1;
function a(){};
复制代码

编译后的代码其实是：

var a;
function a(){};
console.log(a);
a= 1;
复制代码

所以最后输出的是：

function a() {}
复制代码

预编译小节

预编译两个小规则

函数声明整体提升—(具体点说，无论函数调用和声明的位置是前是后，系统总会把函数声明移到调用前面）
变量声明提升—(具体点说，无论变量调用和声明的位置是前是后，系统总会把声明移到调用前，注意仅仅只是声明，所以值是undefined），只有在解释执行阶段才会进行变量初始化，匿名函数不参与预编译。

预编译前奏

imply global 即任何变量，如果未经声明就赋值，则此变量就位全局变量所有(全局域就是window) 。
一切声明的全局变量，全是window的属性。

<script>var a=2; console.log(window.a);//2
</script>
复制代码

3.3 解释执行

预编译完毕之后，JavaScript 脚本开始执行，执行顺序按照从上到下的顺序执行。

总结

JavaScript执行顺序

语法分析
预编译
2.1. 创建AO(GO)对象
2.2. 找形参和变量声明，将形参和变量名作为AO(GO)属性名，值为undefined
2.3. 将实参值和形参统一
2.4. 在函数体里面找函数声明，值赋予函数体。
解释执行

练习：

function a(a){console.log(a);a= 2;console.log(b);var b= 3;console.log(a);
}
a(1);
console.log(a);
复制代码

你可以先试想一下结果，然后复制代码到控制台去验证你的答案是否正确。

转载于:https://juejin.im/post/5c0f6e61f265da612577f4c3