深入理解变量提升和函数提升

深入理解变量提升和函数提升

说起变量提升和函数提升想必搭建都非常的熟悉。毕竟这是几个非常基础，在我们平时的编码中也经常遇到的问题。那么我们今天就来深究一下其中的原理。

本文将参考《你不知道的JavaScript 上卷》,在本书作用域一节中对变量提升原理讲解非常透彻。
强烈建议大家阅读。
复制代码

编译原理

尽管通常将 JavaScript 归类为“动态”或“解释执行”语言。
但事实上它是一门编译语言。 这个事实对你来说可能显而易见，也可能你闻所未闻。
取决于你接触过多少编程语言，具有多少经验。
但与传统的编译语言不同，它不是提前编译的。
编译结果也不能在分布式系统中进行移。
尽管如此，JavaScript引擎进行编译的步骤和传统的编译语言非常相似。
在某些环节可能 比预想的要复杂。
复制代码

JS编译过程分为三步：

• 分词/词法分析(Tokenizing/Lexing)

这个过程会将由字符组成的字符串分解成(对编程语言来说)有意义的代码。
这些代 码块被称为词法单元(token)。
例如，考虑程序var a = 2;
这段程序通常会被分解成为下面这些词法单元:var、a、=、2 、;
空格是否会被当作词法单元，取决于空格在 这门语言中是否具有意义。
复制代码

• 解析/语法分析(Parsing)

这个过程是将词法单元流(数组)转换成一个由元素逐级嵌套所组成的代表了程序语法 结构的树。
这个树被称为“抽象语法树”(Abstract Syntax Tree，AST)。
var a = 2; 的抽象语法树中可能会有一个叫作 VariableDeclaration 的顶级节点
接下来是一个叫作Identifier(它的值是 a)的子节点，
以及一个叫作 AssignmentExpression 的子节点。
AssignmentExpression 节点有一个叫作 NumericLiteral(它的值是 2)的子节点。
复制代码

• 代码生成

将 AST 转换为可执行代码的过程称被称为代码生成。
这个过程与语言、目标平台等息 息相关。
抛开具体细节，简单来说就是有某种方法可以将 var a = 2 的 AST 转化为一组机器指 令,
用来创建一个叫作 a 的变量(包括分配内存等)，并将一个值储存在 a 中。
复制代码

我们举个栗子哈

var num = 1

我们在写程序时，这是一个声明。但是在引擎和编译器看来就复杂多了。

编译器首先会将这段程序分解成词法单元，然后将词法单元解析成一个树结构。
但是当编译器开始进行代码生成时，它对这段程序的处理方式会和预期的有所不同。
可以合理地假设编译器所产生的代码能够用下面的伪代码进行概括:
“为一个变量分配内 存，将其命名为 a，然后将值 2 保存进这个变量。”

然而，这并不完全正确。
事实上编译器会进行如下处理。
1. 遇到 var a，编译器会询问作用域是否已经有一个该名称的变量存在于同一个作用域的 集合中。
如果是，编译器会忽略该声明，继续进行编译;
否则它会要求作用域在当前作 用域的集合中声明一个新的变量，并命名为 a。
2. 接下来编译器会为引擎生成运行时所需的代码，这些代码被用来处理 a = 2 这个赋值操作。
引擎运行时会首先询问作用域，在当前的作用域集合中是否存在一个叫作 a 的变量。
如果是，引擎就会使用这个变量;
如果否，引擎会继续查找该变量。

如果引擎最终找到了 a 变量，就会将 2赋值给它。
否则引擎就会举手示意并抛出一个异常!
总结:变量的赋值操作会执行两个动作。
首先编译器会在当前作用域中声明一个变量(如 果之前没有声明过)
然后在运行时引擎会在作用域中查找该变量，如果能够找到就会对它赋值。
复制代码