手把手带你彻底搞懂GO，AO，VO，VE，GEC，FEC，ECS，变量提升，作用域（链），闭包

少年开心果

已于 2023-08-17 11:48:59 修改

阅读量497

点赞数 2

文章标签： javascript 前端 html

于 2023-06-19 08:08:42 首次发布

本文链接：https://blog.csdn.net/weixin_44995391/article/details/131164820

版权

概述

JS大致的执行过程是这样的：JS引擎会先对 JavaScript 代码进行解析（词法分析，语法分析），生成 AST 树，然后转换成机器指令，进而在CPU 中进行运行。如下图所示：
在这里插入图片描述
而在这个过程中，最基础的，也是最重要的就是理解执行上下文（EC：Execution Context），这都有助于你接下来理解GO，AO，变量提升，作用域（链），闭包等，因为这些概念及其关系全部都发生在EC中（当然，无论是GEC还是FEC都存在于ECS中，这个后面会说明）。所以，我们就先从EC讲起。讲解之前，针对即将遇到的名词做一个总述，希望大家记住这些，看起来很多，但也只是几个单词的排列组合而已。

专有名词描述

在这里插入图片描述

执行上下文（EC：Execution Context）

什么是执行上下文呢？按照TC39官方的说法是“An execution context is a specification device that is used to track the runtime evaluation of code by an ECMAScript implementation.” 官方说法不太好理解，大神Tyler用编写软件的流程来类比得出EC–**Just like functions/modules/packages allow you to manage the complexity of writing code, Execution Contexts allow the JavaScript engine to manage the complexity of interpreting and running your code.**可理解为：执行上下文是指JavaScript代码被执行时的环境，它包括了当前代码中的变量、函数和参数等信息。
Javascript 一共有三种执行上下文：

全局执行上下文（GEC）
这是一个默认的或者说基础的执行上下文，所有不在函数中的代码都会在全局执行上下文中执行。它会做两件事：创建一个全局的 window 对象(浏览器环境下)，并将 this 的值设置为该全局对象，另外一个程序中只能有一个全局上下文。
函数执行上下文（FEC）
每次调用函数时，都会为该函数创建一个执行上下文，每一个函数都有自己的一个执行上下文，但注意是该执行上下文是在函数被调用的时候才会被创建。函数执行上下文会有很多个，每当一个执行上下文被创建的时候，都会按照他们定义的顺序去执行相关代码（这会在后面会说到）。
Eval 函数执行上下文。
在 eval 函数中执行的代码也会有自己的执行上下文，但由于 eval 函数不会被经常用到，这里就不做讨论了。(译者注：eval 函数容易导致恶意攻击，并且运行代码的速度比相应的替代方法慢，所以不推荐使用)。

全局执行上下文 GEC：Global Execution Context

当JS引擎运行JS代码所创建的第一个EC就称为GEC，无论是GEC还是FEC，都是在ECS中创建的。GEC的初始化通常由两部分组成 – 全局对象和this。this的值取决于JS代码的运行环境，如果JS代码是运行在浏览器中，那么this就是window，如果运行在node环境中，那么this就是global object。下面所举的例子如不做特殊说明，都表明其运行在浏览器中
初始化过程：
在这里插入图片描述
GEC中的代码执行分为两个阶段，创建阶段和执行阶段。
创建阶段：

从上图可以总结出GEC代码的创建阶段分为以下四个步骤：

创建一个全局对象
创建一个this对象
为变量和函数分配内存空间
在内存中存放函数声明，为变量声明指定默认值“undefined”。
接下来看一下执行阶段：

两个阶段总结为：在创建阶段，创建全局对象window和this对象，声明的变量被分配一个默认值undefined，所有函数声明（getUser）都被放入到内存中。然后，一旦我们进入执行阶段，也只有进入到执行阶段，JavaScript引擎才会开始逐行执行代码，并将实际值分配给已经存在于内存中的变量。

变量提升

接下来通过一段代码来看一下变量提升是什么意思。
在这里插入图片描述
因此，什么是变量提升呢？在创建阶段为变量声明指定undefined的默认值的过程称为提升。简单理解就是：变量提升就是字面意思，变量声明被提升到了前面。（当然，这个只针对于var定义的变量，因为其没有自己的作用域）。
针对变量提升需要注意的点是：

函数提升只针对具名函数，而对于赋值的匿名函数（表达式函数），并不会存在函数提升。
【提升优先级问题】函数提升优先级高于变量提升，且不会被同名变量声明覆盖，但是会被变量赋值后覆盖。而且存在同名函数与同名变量时，优先执行函数。
看个例子：

console.log(foo);      //	f foo()
console.log(foo());    //	2
var foo = 1;
function foo(){
    console.log(2);
}
console.log(typeof foo)  // number
console.log(foo);       //	1
foo = 3
console.log(foo())   //	Uncaught TypeError:foo is not a function

函数执行上下文（FEC：Function Execution Context）

让我们再来看一个例子。

var name = 'Tyler';
var handle = '@tylermcginnis';

function getURL (handle) {
  var tempURL = "http://www.baidu.com/";
  return tempURL + handle;
}

getURL();

Tips: 当且仅当函数被调用时，FEC才会被创建。
与GEC中的代码执行类似，FEC中的代码执行也分为两个阶段，创建阶段和执行阶段。
创建阶段：
在这里插入图片描述

从上图可以总结出FEC代码的创建阶段分为以下四个步骤：

创建一个arguments对象
创建一个this对象（this的指向与调用方式有关，不一定是window）
为变量和函数分配内存空间
在内存中存放函数声明，为变量声明指定默认值“undefined”。

执行阶段

在这里插入图片描述
两个阶段总结为：在创建阶段，创建对象arguments和this对象，声明的变量被分配一个默认值undefined，所有声明都被放入到内存中。然后，一旦我们进入执行阶段，也只有进入到执行阶段，JavaScript引擎才会开始逐行执行代码，并将实际值分配给已经存在于内存中的变量。

JS代码的执行流程

说到这里我们已经对GEC和FEC，包括变量提升有了一定的了解，但是对于GEC与FEC中的代码为什么会这么执行，以及GEC与FEC如何调用及清除还是会有些困惑。接下来通过一张JS代码的执行流程图来看一下JS代码的大致执行过程，再进行接下来的叙述：
在这里插入图片描述

执行上下文栈（调用栈）（ECS）

通过上图，我们可以知道，事实上，JS引擎内部有一个ECS（也叫做调用栈CS），他是用来执行代码的调用栈。如前所述，JS引擎运行JS代码所创建的第一个EC就称为GEC，这个GEC会被推入到ECS中。以后，任何一个函数被调用时，就会新创建一个FEC，将其推入到ECS中，当函数的创建和执行阶段都完成后，FEC就会从ECS中出栈。当GEC中的代码也完成这两个阶段后，GEC也会出栈，代码执行就结束了。

作用域（链）

让我们再看一个例子。

var name = 'Tyler';
var handle = '@tylermcginnis';

function getURL (handle) {
  var tempURL = "http://www.baidu.com/";
  // 'http://www.baidu.com/Tylerundefined'
  return tempURL + name + handle;  
}

getURL();

上述代码有一些重要的细节我们需要关注。

首先，向函数中传入的任何变量都将作为局部变量被添加到FEC中。在这个例子中，handle即作为GEC中的变量而存在（因为其是在那里定义的），又作为getURL的FEC中的变量而存在（因为我们将其作为参数传入）
其次，在函数内部声明的变量位于FEC中。因此，当我们创建tempURL时，他就位于getURL的EC中，而不是GEC中。为什么会这样呢？这就引出来作用域的概念了。什么是作用域呢？MDN将作用域定义为：“执行的当前上下文”。JavaScript 中的作用域其实就是变量的可访问性和可见性。也就是说整个程序中哪些部分可以访问这个变量，或者说这个变量都在哪些地方可见。
我们知道，在ES6之前，JS只有函数作用域和全局作用域这两种。在全局作用域定义的变量在全局都有效，而在函数作用域中定义的变量只在函数中起作用，当FEC完成了创建和执行两个阶段，FEC从ECS中出栈，FEC中的变量被清除（在大多数情况下，特殊情况如闭包，接下里会进行讲述）。
作用域链：将上述代码运行后发现结果为‘http://www.baidu.com/Tylerundefined’，这里有一个疑问就是，函数getURL的EC中没有定义name，为何结果中name可以被找到。这就涉及到一个概念 – 作用域链。那么什么是作用域链呢？如果变量不存在于本地执行上下文中，JavaScript引擎逐一检查每个单独的父级执行上下文的过程称为作用域链。 如果逐级找到GEC中后，还没有找到这个变量的定义。那么就会报Reference Error错误。

闭包

如前所述，在大多数情况下，当FEC完成了创建和执行两个阶段，FEC从ECS中出栈，FEC中的变量被清除。但是有一种特殊情况，FEC中的变量不会被（完全）清除，就是闭包。那么，什么是闭包呢？MDN上将闭包定义为：闭包（closure）是一个函数以及其捆绑的周边环境状态（lexical environment，词法环境）的引用的组合。也就是说，闭包可以让一个内层函数访问到外层函数的作用域。可以简单理解为，JS中的函数，如果其访问量外层作用域中的变量，那么它就是一个闭包。所以，上述例子中的getURL就是一个闭包。再来看一个例子

var count = 0;

function makeAdd(x) {
  var z = 3;
  return function inner(y) {
    return x + y;
  };
}

var add5 = makeAdd(5);
count += add5(8);

在这个示例中，内部函数inner嵌套在makeAdder函数内部，因此inner在makeAddr变量环境上创建了一个闭包。即使在makeAdder Execution Environment从Execution Stack中弹出之后，由于创建了闭包，内部也可以访问x变量（通过Scope Chain）。
在这里插入图片描述

如上图所示，之所以说存在闭包，FEC中的变量不会被完全清除，这是跟V8引擎的优化有关的。对于闭包内引用的变量，V8引擎不会将其清除，而对于没有引用的变量，则会清除。如上述代码中，x会存在于闭包中，而z则会在makeAdder 的EC从ECS中弹出后被清除。

GO, AO, VO, VE

上面叙述了这么多，那么GO, AO, VO, VE到底又是啥呢？他们出现在哪个地方呢？下面从 ECMA 新旧版本规范中来谈谈。

在早期 ECMA 的版本规范中：每一个执行上下文会被关联到一个变量对象（Variable Object，简称 VO），在源代码中的变量和函数声明会被作为属性添加到 VO 中。对应函数来说，参数也会被添加到 VO 中。

也就是创建的 GO 或者 AO 都会被关联到变量环境（VO）上，可以通过 VO 查找到需要的属性；

规定了 VO 为 Object 类型，通常 GO 和 AO 都是 Object 类型；

在最新 ECMA 的版本规范中：每一个执行上下文会关联到一个变量环境（Variable Environment，简称 VE），在执行代码中变量和函数的声明会作为环境记录（Environment Record）添加到变量环境中。对于函数来说，参数也会被作为环境记录添加到变量环境中。
也就是相比于早期的版本规范，对于变量环境，已经去除了 VO 这个概念，提出了一个新的概念 VE；
没有规定 VE 必须为 Object，不同的 JS 引擎可以使用不同的类型，作为一条环境记录添加进去即可；
虽然新版本规范将变量环境改成了 VE，但是 JavaScript 的执行过程还是不变的，只是关联的变量环境不同，将 VE 看成 VO 即可；

具体实例查看整个执行过程

var name = 'curry'

console.log(message)

var message = 'I am new-coder.cn'

function foo() {
  var name = 'foo'
  console.log(name)
}

var num1 = 1
var num2 = 2

var result = num1 + num2

foo()

下图描述了这段代码执行的具体过程。
在这里插入图片描述
图中三个步骤的详细描述：

初始化全局对象。

这里需要注意的是函数存放的是地址，会指向函数对象，与普通变量有所不同；
从上往下解析 JS 代码，当解析到 foo 函数时，因为 foo 不是普通变量，并不会赋为 undefined，JS 引擎会在堆内存中开辟一块空间存放 foo 函数，在全局对象中引用其地址；
这个开辟的函数存储空间最主要存放了该函数的父级作用域和函数的执行体代码块；

构建一个全局执行上下文（GEC），代码执行前将 VO 的内存地址指向 GlobalObject（GO）。
将全局执行上下文（GEC）放入执行上下文栈（ECS）中。
从上往下开始执行全局代码，依次对 GO 对象中的全局变量进行赋值。

当执行 var name = 'curry’时，就从 VO（对应的就是 GO）中找到 name 属性赋值为 curry；
接下来执行 console.log(message)，就从 VO 中找到 message，注意此时的 message 还为 undefined，因为 message 真正赋值在下一行代码，所以就直接打印 undefined（也就是我们经常说的变量作用域提升）；
后面就依次进行赋值，执行到 var result = num1 + num2，也是从 VO 中找到 num1 和 num2 两个属性的值进行相加，然后赋值给 result，result 最终就为 50；
最后执行到 foo()，也就是需要去执行 foo 函数了，这里的操作是比较特殊的，涉及到函数执行上下文，下面来详细了解；

遇到函数是怎么执行的？继续来看上面的代码执行，当执行到 foo()时：

先找到 foo 函数的存储地址，然后解析 foo 函数，生成函数的 AO；
根据 AO 生成函数执行上下文（FEC），并将其放入执行上下文栈（ECS）中；
开始执行 foo 函数内代码，依次找到 AO 中的属性并赋值，当执行 console.log(name)时，就会去 foo 的 VO（对应的就是 foo 函数的 AO）中找到 name 属性值并打印；