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

疯狂的技术宅

发布于 2019-03-28 11:30:49

9930

发布于 2019-03-28 11:30:49

先看个例子:

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

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

undefined  'foo'

请解释一下原因？这不就是常说的 Hoisting 吗？代码在执行的时候，其实是这个样子的：

function foo() {  
  console.log('foo')
}var aconsole.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)的状态：