转载

JS the Hardcore: 执行上下文(Execution Context)

先看个例子:

console.log(a)  
console.log(foo())  
var a = 'hello world'

function foo() {  
    console.log('foo')
}

估计大部分人早就对这种问题了如指掌了，输出结果也是脱口而出：

undefined  
'foo'

请解释一下原因？

这不就是常说的 Hoisting 吗？

代码在执行的时候，其实是这个样子的：

function foo() {  
  console.log('foo')
}
var a

console.log(a)  
console.log(foo())

a = 'hello world'

是的，这样解释也可以，但是不够准确。如果仅仅理解到这个层面，而不把这里面涉及到的「执行上下文」(Execution Context, 下面简称 EC)这个概念弄明白，还是不能「知其所以然」。

首先需要澄清的一点是，像 C 和 Java 这类所谓的「静态语言」需要编译后才能运行，但其实 Javascript 一样也是有编译过程的，只是处于一些限制，编译过程特别快(以微秒计)，以至于感觉上 Javascript 代码好像并没有经过编译。

当需要向别人描述一件事情的经过时，往往需要把事情的前因后果以及与其相关的场景预先说明一下。类似，EC 就是一段代码涉及到的场景，在代码运行之前，js engine 会做一些变量内存分配，代码上下文关联的准备工作，这就是 EC。 EC 是 Javascript 引擎实现的一个内部机制，不能在代码中直接访问到。

对编程语言来说，给变量赋值，获取变量的值，是需要解决的基本问题，Javascript 当然也不例外。 EC 中会给变量分配一个存储空间，与之对应的数据结构称作 enviroment。

当程序流程需要从当前的 EC 进入另外一个和当前上下文无关的代码片段时，会创建一个新的 EC，并被推入栈中。这就是「执行上下文栈」(Execution Context Stack)，可以看作是调用栈的镜像。由于所有的 js 代码都存在于全局环境中，所以首先会创建 「全局执行上下文」(Global Execution Context) ，除此之外，js 中每一次的函数调用也会生成 EC，所以栈底肯定会是全局执行上下文。

如果把 EC 视为作一个抽象对象，那这个对象包含了代码相关的 this、enviroment(存储标识符包括变量声明、函数声明、函数表达式的数据结构)和一个指向外部 enviroment 的指针。

Global Execution Context

Global Execution Context = {
        global object,
        this: global object,
        outer environment: null,
        enviroment: {
            // all the identifiers
            variable,
            function expression,
            function declaration,
        },
    }

Function Execution Context

Execution Context = {
        this: some value,
        outer environment: outer lexcial environment,
        enviroment: {
            // all the identifiers
            parameter,
            arguments,
            variable,
            function expression,
            function declaration,
        },
    }

在 EC 创建之后，js engine 会开始顺序执行代码。

/** 01 **/ var x = 'hello world'
/** 02 **/
/** 03 **/ function foo() {
/** 04 **/   var y = 'hellow foo'
/** 05 **/   console.log(y)
/** 06 **/ }
/** 07 **/
/** 08 **/ console.log(x)
/** 09 **/ foo()

代码执行前，首先创建全局执行上下文并设置为 「当前执行上下文」(running execution context) ：

Execution Context = {
        global object,
        this: global object,
        outer environment: null,
        enviroment: {
            x: undefined,
            foo,
            bar,
        },
    }

之后，顺序执行代码，执行到 ln 01 时，给变量 x 赋值，

Global Execution Context = {
        global object,
        this: global object,
        outer environment: null,
        enviroment: {
            x: 'hello world',
            foo,
            bar,
        },
    }

代码执行到 ln 08 时，需要去 enviroment 中寻找 x 的值，此时为 'hello world' 。

代码执行到 ln 09 时，因为是对函数的调用，会创建一个新的执行上下文，并置为「当前执行上下文」：

foo Execution Context = {
        this: window,
        outer environment: Global.environment,
        enviroment: {
            arguments,
            y: undefined,
            bar,
        },
    }

然后代码继续执行，到 ln 04 时，有对 y 的赋值操作，此时

foo Execution Context = {
        this: window,
        outer environment: Global.environment,
        enviroment: {
            arguments,
            y: 'hello foo',
        },
    }

代码执行到 ln 05 有对 y 的取值操作，y 值在当前的 enviroment 中为 'hellow foo' 。

EC 栈的情况，可以参照下图「调用栈」(Call Stack)的状态：

JS the Hardcore: 执行上下文(Execution Context)

到这里就基本上把执行上下文的一些基本概念讲完了，其中涉及到的一些内容目前不理解没有关系，后面会慢慢解释。

原文 https://www.qianduan.net/js-the-hardcore-execution-context/

正文到此结束

所属分类：编程技术

本文标签： UI http core js src https value ip 空间编译代码 id java IDE IO 数据 JavaScript
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二