执行上下文

原文 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已经存在了。对于变量,如果存在同名属性,就会向下扫描。

  • 为什么barundefined

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

不错的外链:

一些例子

发现有人问了一些问题,特此来解释下:

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'.

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

Last updated