重识JavaScript代码如何执行(闭包,作用域,this指向)

JavaScript代码如何执行，我们应该都会大概有些了解，V8引擎，单线程，回调队列，除此之外，一些基本的需要掌握有执行环境、词法环境、作用域、执行上下文、闭包等内容。其实很多时候，我们大致都知道是怎么个回事，可有很难把这些区分清楚，分别如何去描述。

JavaScript 代码运行的各个阶段

JavaScript 是弱类型语言，在运行时才能确定变量类型。即使是如今流行的 TypeScript，也只是增加了编译时（编译成 JavaScript）的类型检测（对于编译器相信大家都有所了解，代码编译过程中编译器会进行词法分析、语法分析、语义分析、生成 AST 等处理）。

同样，JavaScript 引擎在执行 JavaScript 代码时，也会从上到下进行词法分析、语法分析、语义分析等处理，并在代码解析完成后生成 AST（抽象语法树），最终根据 AST 生成 CPU 可以执行的机器码并执行。

在 V8 引擎中 JavaScript 代码的运行过程主要分成三个阶段:

1. 语法分析阶段。该阶段会对代码进行语法分析，检查是否有语法错误（SyntaxError），如果发现语法错误，会在控制台抛出异常并终止执行。
2. 编译阶段。该阶段会进行执行上下文（Execution Context）的创建，包括创建变量对象、建立作用域链、确定 this 的指向等。每进入一个不同的运行环境时，V8 引擎都会创建一个新的执行上下文。
3. 执行阶段。 将编译阶段中创建的执行上下文压入调用栈，并成为正在运行的执行上下文，代码执行结束后，将其弹出调用栈。

编译阶段

执行上下文的创建

JavaScript 运行环境包括全局环境、函数环境和eval，其中全局环境和函数环境的创建过程如下：

1. 第一次载入 JavaScript 代码时，首先会创建一个全局环境。全局环境位于最外层，直到应用程序退出后（例如关闭浏览器和网页）才会被销毁。
2. 每个函数都有自己的运行环境，当函数被调用时，则会进入该函数的运行环境。当该环境中的代码被全部执行完毕后，该环境会被销毁。不同的函数运行环境不一样，即使是同一个函数，在被多次调用时也会创建多个不同的函数环境。

每进入一个不同的运行环境时，JavaScript 都会创建一个新的执行上下文，该过程包括：

1. 建立作用域链（Scope Chain）；
2. 创建变量对象（Variable Object，简称 VO) ；
3. 确定 this 的指向。

创建变量对象

浏览器中，全局环境的变量对象是window对象，因此所有的全局变量和函数都是作为window对象的属性和方法创建的

创建变量对象将会创建arguments对象（仅函数环境下），同时会检查当前上下文的函数声明和变量声明。

变量声明：此时会给变量分配内存，并将其初始化为undefined（该过程只进行定义声明，执行阶段才执行赋值语句）。
函数声明：此时会在内存里创建函数对象，并且直接初始化为该函数对象。

在各类编程语言中，作用域分为静态作用域和动态作用域。JavaScript 采用的是词法作用域（Lexical Scoping），也就是静态作用域。词法作用域中的变量，在编译过程中会产生一个确定的作用域。

建立作用域链

作用域链，顾名思义，就是将各个作用域通过某种方式连接在一起。

作用域就是词法环境，而词法环境由两个成员组成。

• 作用域就是词法环境，而词法环境由两个成员组成。
• 外部词法环境引用（Outer Lexical Environment）：记录外层词法环境的引用。

通过外部词法环境的引用，作用域可以层层拓展，建立起从里到外延伸的一条作用域链。当某个变量无法在自身词法环境记录中找到时，可以根据外部词法环境引用向外层进行寻找，直到最外层的词法环境中外部词法环境引用为null，这便是作用域链的变量查询。

JavaScript 会通过外部词法环境引用来创建变量对象的一个作用域链，从而保证对执行环境有权访问的变量和函数的有序访问。

闭包
一般来说，当函数执行结束之后，执行期上下文将被销毁（作用域链和活动对象均被销毁）。但有时候我们想要保留其中一些变量对象，不想被销毁，此时就会使用到闭包。

function foo() {
  var a = 1;
  function bar() {
    return a;
  }
  return bar;
}
var b = foo();
console.log(b()); // 1

前面我们说到，当函数执行结束之后，执行期上下文将被销毁，其中包括作用域链和激活对象。那么，在这个例子中，当b()执行时，foo函数上下文包括作用域都已经被销毁了，为什么foo作用域下的a依然可以被访问到呢？

这是因为bar函数引用了foo函数变量对象中的值，此时即使创建bar函数的foo函数执行上下文被销毁了，但它的变量对象依然会保留在 JavaScript 内存中，bar函数依然可以通过bar函数的作用域链找到它，并进行访问。这便是我们常说的闭包，即使创建它的上下文已经销毁，它仍然被保留在内存中。

闭包使得我们可以从外部读取局部变量，在大多数项目中都会被使用到，常见的用途包括：

• 用于从外部读取其他函数内部变量的函数；
• 可以使用闭包来模拟私有方法；
• 让这些变量的值始终保持在内存中。

确定 this 的指向

小结

JavaScript 代码的运行过程，该过程分为语法分析阶段、编译阶段、执行阶段三个阶段。
在编译阶段，JavaScript会进行执行上下文的创建，包括：

• 创建变量对象，进行变量声明和函数声明，此时会产生变量提升和函数提升；
• 通过添加对外部词法环境的引用，建立作用域链，通过作用域链可以访问外部的变量对象；
• 确定 this 的指向。

在执行阶段，变量对象（VO）会被激活为活动对象（AO），变量会进行赋值，此时活动对象才可被访问。在执行结束之后，作用域链和活动对象均被销毁，使用闭包可使活动对象依然被保留在内存中。这就是 JavaScript 代码的运行过程。