执行上下文

原文 What is the Execution Context & Stack in JavaScript?

我们通过引擎执行知道代码执行走向,但是他具体是怎么执行的呢

这就要从他的执行上下文(execution context)来说起来。

执行上下文

执行一段代码，就会存在上下文。上下文主要分为两种:

• global context

• function context

看下图，比较直观

可以很清楚的看到，最外层的就是全局上下文，函数里的是function context, 里面的execution context 就是 function execution context.

我们应该知道，这段代码可以访问上下文之外的代码(变量，函数...), 但是外部却无法获取内部的变量等，这是为什么?

execution context stack

我们前面说过，浏览器是单线程在执行，一次只能做一件事，后面的需要排队进入execution stack。

看下面的例子:

可以看到，执行的上下文会放入 execution context 去执行，如果当前的额上下文执行结束，就会回到前一个上下文去执行，直到全局上下文结束。

关于execution stack的五个点：

• 单线程

• 同步执行

• 一个全局上下文

• 可以无数个函数上下文

• 每个函数的调用都会创建一个上下文，包括自调用

执行上下文详解

上面说了，每次调用函数时都会创建一个上下文。js的解释器对于上下文的执行分了两个阶段.

• 创建阶段 Creation Stage 这个发生在调用函数的时候，并且在执行内部任何代码之前。

  • 创建作用域链(Scope chain)

  • 创建变量，函数，参数...

  • 确定当前上下文的this

• 代码执行阶段(Activation / Code Execution Stage)

  • 分配值，引用函数和解释/执行代码。

上面的创建阶段，可以这么理解

executionContextObj = {
    'scopeChain': { /* 变量对象加上父级上线问的变量对象 */ },
    'variableObject': { /* 函数的参数，内部的方法变量声明等 */ },
    'this': {}
}

Activation / Variable Object [AO/VO]

上面的executionContextObj是在调用函数并且真正的执行函数之前创建的，也就是在Creation Stage创建的。 这里解释器会扫描传入的参数和内部的变量声明以及函数声明，最终的结果是在executionContextObj中生成variableObject.

简单的来概述下解释器是怎么来处理的.

1. 运行代码来调用函数

2. 在执行代码函数执行，先去创建上下文.

3. 进入创建阶段

   • 初始化作用域链

   • 创建变量对象(vo)

     • 创建arguments对象，检查当前上下文的参数，初始化名称和值并创建引用副本

     • 扫描当前上下文的函数声明

       • 扫描到来函数声明，那就在vo(variable object)里创建他的名称，并且指针是指向内存中函数引用的地址

       • 如果扫描的函数声明已存在，那就覆盖vo中的引用指针

     • 扫描当前上下文的变量声明

       • 扫到变量声明，在vo中添加变量名称，并且初始化值是undefined

       • 如果vo中存在变量名称，那就不做处理，继续扫描

   • 确定当前上下文的this指向

4. 激活/执行阶段

   • 在上下文中运行/解释函数，并在代码逐行执行时分配变量值。

在上面的VO的时候可以发现，函数是被特殊照顾了, 先于变量的处理，所以为啥在变量提升的时候，函数被提到函数顶部了，所以，函数是第一等公民，哈哈

下面来看一个例子:

function foo(i) {
    var a = 'hello';
    var b = function privateB() {

    };
    function c() {

    }
}

foo(22);

当调用foo(22)的时候，创建阶段看起来类似于下面这样

fooExecutionContext = {
    scopeChain: { ... },
    variableObject: {
        arguments: {
            0: 22,
            length: 1
        },
        i: 22,
        c: pointer to function c()
        a: undefined,
        b: undefined
    },
    this: { ... }
}

可以发现，在创建阶段, 对于变量，是初始化为undefined, 但是对于传递进来的参数却是不同，他是直接赋值。zai这里创建阶段完成之后，就会进入激活/执行阶段。

fooExecutionContext = {
    scopeChain: { ... },
    variableObject: {
        arguments: {
            0: 22,
            length: 1
        },
        i: 22,
        c: pointer to function c()
        a: 'hello',
        b: pointer to function privateB()
    },
    this: { ... }
}

关于提升(Hoisting)

(function() {

    console.log(typeof foo);
    console.log(typeof bar);

    var foo = 'hello',
        bar = function() {
            return 'world';
        };

    function foo() {
        return 'hello';
    }

}());

为什么一个是function 一个是undefined.你可能会说是因为变量提升，现在我们知道了上面的知识，可以回答了。

• 为什么我们可以在申明foo之前访问到他？

很简单，在代码执行阶段(Activation / Code Execution Stage)，我们已经过了创建阶段的VO过程，这时候是function.

• 为什么foo被声明了两次，显示的是function，却不是undefined或者string

在VO阶段，我们知道函数的处理会在变量的前面，在变量进行AO(activation object)的时候，VO已经存在了。对于变量，如果存在同名属性，就会向下扫描。

• 为什么bar是undefined

因为在AO的过程，对于变量 是需要初始化为undefined存在VO里。

不错的外链:

• Javascript Closures
• Identifier Resolution and Closures in the JavaScript Scope Chain
• I never understood JavaScript closures 由此文引发针对context的学习

一些例子

发现有人问了一些问题，特此来解释下：

example1:

function run() {
  foo() //1
  if(true){
    function foo() {console.log('true')}
  } else{
    function foo() {console.log('false')}
  }
  foo() //2
}
run()

执行上面代码会发现1处报错，2处是true. 因为在代码解释阶段，是没有去解释块里的内容的，所以在当前的vo里不存在foo,会报错。2打印true,是在代码执行阶段再去处理.

example2:

function run() {
  console.log(a) //1 -> function point
  console.log(a()) // 3
  var a = 'var a'
  function a() {return 'func a'}
  console.log(a) //2 -> var a
  console.log(a()) //4
}
run()

可以发现，1处打印的是一个function指向，因为执行vo,函数声明优先于变量。2处打印的是个变量.因为在解释阶段是指向函数声明，但是在执行阶段，重新指向了变量。你可能会想，为啥第一行执行没有被覆盖，第二行执行被覆盖了。因为第一行执行的时候，就是变量提升，那时候按照vo的规则，变量声明的时候存在了function指向的名称，所以不会被重新定义。第二行执行的时候就不是变提升了，按照执行流程来，function在解释的时候就被提升到顶部了，在执行的时候不会再执行函数声明只会执行赋值a = 'var a'.

看3和4标注的行，3是输出func a, 4是报错，就是因为在执行的时候经过了a = var 'a'的赋值。这个时候更新了a。