javascript 已经成为了 web 开发的必备技能，不仅仅局限于浏览器端，也广泛应用于 node.js 、移动端、桌面端以及嵌入式设备等多种应用场景。在 javascript 执行的过程中，有一个很重要的概念，那就是编译过程。这篇文章将从编译过程的角度介绍 javascript 的执行过程。
什么是编译过程？
编译过程是将源代码转换成可执行代码的过程。在 Javascript 中，编译过程可以分为两个阶段：解析阶段和执行阶段。
解析阶段
解析阶段又分为两个部分：词法分析和语法分析。
词法分析
词法分析的任务是将源代码分解成词法单元（token），也就是语言中的最小单元。词法单元包括关键字（如 function 、var ）、标识符（如变量名和函数名）和操作符（如 + 、-、* 、/ 等）等。
例如，下面是一个简单的函数声明：
立即学习“Java免费学习笔记（深入）”；
function add(x, y) {
return x + y;
}这个函数声明会被分解成以下的词法单元：
Keyword 'function'
Identifier 'add'
Punctuator '('
Identifier 'x'
Punctuator ','
Identifier 'y'
Punctuator ')'
Punctuator '{'
Keyword 'return'
Identifier 'x'
Punctuator '+'
Identifier 'y'
Punctuator ';'
Punctuator '}'语法分析
语法分析的任务是将词法单元转换成抽象语法树（AST）。抽象语法树是一种以树状结构表示代码语法结构的数据结构。每个节点代表了语法结构中的一个构造，子节点代表该构造的子构造。
例如，对于上面的函数声明，生成的抽象语法树如下所示：
{
"type": "FunctionDeclaration",
"id": {
"type": "Identifier",
"name": "add"
},
"params": [
{
"type": "Identifier",
"name": "x"
},
{
"type": "Identifier",
"name": "y"
}
],
"body": {
"type": "BlockStatement",
"body": [
{
"type": "ReturnStatement",
"argument": {
"type": "BinaryExpression",
"operator": "+",
"left": {
"type": "Identifier",
"name": "x"
},
"right": {
"type": "Identifier",
"name": "y"
}
}
}
]
}
}执行阶段
解析阶段完成后，Javascript 程序进入执行阶段。执行阶段的任务是执行抽象语法树。
执行抽象语法树的过程可以分成两个阶段：预编译和执行。
预编译
预编译的任务是处理变量和函数声明。在执行阶段开始前，Javascript 引擎会扫描程序的抽象语法树，在当前的作用域内创建对应的变量和函数，这个过程被称为作用域的预处理。
首先，将所有的函数声明提前，这个过程叫做函数声明提升（Function Declarations Hoisting）。函数声明提升的本质就是将函数名称和函数体提升到了当前作用域的顶端，因此可以在函数声明之前调用函数。
例如，下面的代码：
add(1, 2);
function add(x, y) {
return x + y;
}等价于：
function add(x, y) {
return x + y;
}
add(1, 2);其次，将所有的变量声明提前，这个过程叫变量提升（Variable Hoisting）。需要注意的是，变量提升只会提升变量的声明，而不会提升变量的赋值语句。
例如，下面的代码：
console.log(a); var a = 1;
等价于：
var a; console.log(a); a = 1;
执行
执行过程按照语句出现的顺序执行。在执行的过程中，变量会被赋值、函数会被调用、并且可能会被代码块或函数的作用域限制。
总结
Javascript 的编译过程包括解析阶段和执行阶段。解析阶段包括词法分析和语法分析，执行阶段包括预编译和执行。在执行阶段之前，Javascript 引擎会预处理作用域，进行函数声明提升和变量提升，然后按照语句出现的顺序执行代码。
