定义

执行上下文栈（Execution context stack，ECS）

执行上下文 (Execution context, EC)

每次当控制器转到ECMAScript可执行代码的时候，即会进入到一个执行上下文。

活动的执行上下文组在逻辑上组成一个堆栈，堆栈在EC类型进入和退出上下文的时候被修改（推入或弹出）。

可执行代码

可执行代码(executable code)的类型有三种，全局代码、函数代码、eval 代码

所以也就存在三种上下文，全局执行上下文、函数执行上下文、eval 执行上下文

执行上下文

对于每个执行上下文，都有三个重要属性：

  • 变量对象(Variable object，VO)
  • 作用域链(Scope chain)
  • this

执行上下文栈底部永远都是全局上下文(global context)，而顶部就是当前(活动的)执行上下文。

当调用一个函数时，开始执行前会创建一个该函数的执行上下文，并将该执行上下文压入执行栈，当函数结束后再将该函数的执行上下文从执行栈中推出。

  1. function fn1() {
  2.   fn2()
  3. }
  5. function fn2() {
  6.  fn3()
  7. }
  9. function fn3() {}
  11. fn1()
  13. // 以上的处理过程
  15. // 伪代码
  17. // 在开始执行时会创建全局执行上下文
  18. ECS = [ globalContext ]
  20. // 执行 fn1
  21. ECS = [ fn1Context, globalContext ]
  23. // fn1 里调用了 fn2，执行 fn2
  24. ECS = [ fn2Context, fn1Context, globalContext ]
  27. // fn2 里调用了 fn3，执行 fn3
  28. ECS = [ fn3Context, fn2Context, fn1Context, globalContext ]
  30. // 当 fn3执行完后，推出 fn3 的执行上下文
  31. ECS = [ fn2Context, fn1Context, globalContext ]
  33. // 继续执行 fn2，fn2 执行完后推出栈
  34. ECS = [ fn1Context, globalContext ]
  36. // 继续执行 fn1，fn1执行完后推出栈
  37. ECS = [ globalContext ]
  39. // 至些，执行完，全局执行上下文一个保留

执行上下文生命周期：

共有三大阶段：

  • 创建阶段
  • 执行阶段
  • 回收阶段
  1. 创建阶段
    1. 初始化变量对象VO
      1. 处理函数的形参
        1. 用 arguments 初始化变量对象属性，arguments 属性的值是 Arguments 对象。
        2. 没有实参，对应的形参的值是 undefined。
      2. 函数声明
        1. 由名称和对应值（函数对象(function-object)）组成一个变量对象的属性被创建。
        2. 如变量对象已经存在相同名称的属性，则完全替换这个属性。
      3. 变量声明
        1. 由名称和对应值（undefined）组成一个变量对象的属性被创建。
        2. 如变量名称跟已经声明的形式参数或函数相同，则变量声明不会干扰已经存在的这类属性
    2. 建立作用域链
      1. functionContext.scope = function.VO + function.[[scope]]
      2. 先取到在词法阶段定义的词法作用域，存于函数的属性 [[Scope]] 中，再复制到 functionContext.scope 中。
      3. 并将当前 VO 对象放在 scope 属性前端。
    3. 确定this的指向
      1. this 的值是在执行的时候才能确认，定义的时候不能确认。
      2. 一般由调用者提供，谁调用 this 一般指向谁。
      3. call、apply 和 bind：this 是第一个参数。
      4. 构造函数中，被构造函数是 this。
      5. 箭头函数没有 this， 由父上下文提供。
  2. 执行阶段
    1. 开始执行代码。
    2. 标识符赋值和引用，执行其它代码。
    3. 此时变量对象 AO 变成活动对象 VO。
    4. 将生成的当前执行上下文推入执行上下文栈(ECS)
  3. 回收阶段
    1. 将当前执行上下文弹出执行栈
    2. 销毁当前上下文
    3. 闭包的情况另说

基础情况示例代码

  1. function fn(a, b, c){
  2.   var m = 10;
  3.   var n = 20
  4.   var x = 30
  5.   var y = 40
  7.   p = 50
  9.   var n = 25
  11.   function sum(){
  12.     return a + b + c + m + n
  13.   }
  15.   var out = function() {}
  17.   function x() {}
  18. }
  19. fn(1, 2)
  21. // 函数 fn 在创建时的词法作用域是
  22. fn.[[Scope]] = [
  23.   globalContext.VO
  24. ]
  26. // 1. 执行函数 fn 代码前先创建 fn 的执行上下文
  27. fnContext = {}
  29. // 2. 使用 arguments 初始化 VO
  30. fnContext.VO = {
  31.   arguments: {
  32.     0: 1,
  33.     1: 2,
  34.     length: 2
  35.   }
  36. }
  38. // 3. 对函数和变量的提升，继续初始化VO
  39. fnContext.VO = {
  40.   arguments: {
  41.     0: 1,
  42.     1: 2,
  43.     length：2
  44.   }，
  45.   a: 1, 
  46.   b: 2,
  47.   c: undefined,
  48.   m: undefined,
  49.   n: undefined,
  50.   x: <reference function x>,
  51.   y: undefined,
  52.   sum: <reference function sum>,
  53.   out: undefined
  54. }
  56. // 4. 对执行上下文进行作用域建立
  57. fnContext = {
  58.   VO: {},
  59.   Scope: [[Scope]]
  60. }
  62. // 5. 对执行上下文进行作用域建立
  63. fnContext = {
  64.   VO: {},
  65.   scopeChain: [[Scope]]
  66. }
  68. // 6. 将自身 VO 推入作用域
  69. fnContext = {
  70.   VO: {},
  71.   scopeChain: [ VO, [[Scope]] ]
  72. }
  73. // 等价于
  74. fnContext = {
  75.   VO: {},
  76.   scopeChain: [VO(fn), VO(global)]
  77. }
  79. // 7. 确认 this 指向，当前是全局 window 调用 
  80. fnContext = {
  81.   VO: {},
  82.   scopeChain: [VO(fn), VO(global)],
  83.   this: window
  84. }
  86. // 8. 开始执行代码，将当前执行上下文推入执行栈
  87. ECStack = [
  88.   fnContext,
  89.   globalContext,
  90. ]
  92. // 9. 执行代码过程中修改 VO
  93. fnContext = {
  94.   VO: {
  95.     arguments: {
  96.       0: 1,
  97.       1: 2,
  98.       length：2
  99.     }，
  100.     a: 1, 
  101.     b: 2,
  102.     c: undefined,
  103.     m: 10,
  104.     n: 25,
  105.     x: <reference function x>,
  106.     y: 40,
  107.     sum: <reference function sum>,
  108.     out: <reference function out>,
  109.   },
  110.   scopeChain: [VO(fn), VO(global)],
  111.   this: window
  112. }
  114. // 10. 执行结束，将 fnContext 弹出执行栈，等待销毁
  115. ECStack = [
  116.   globalContext
  117. ]

闭包

当以上过程遇到闭包时，执行顺序不变，执行上下文也会在执行栈中弹出，被销毁。但依然能调用上级函数的变量，因为当上级标识符被引用时，上级函数的AO依然会在内存中，不会被销毁，所以当前函数依然能从函数作用域链中找到该变量。

以同上示例代码为例：

  1. function fn(a, b, c){
  2.   // ...
  4.   function sum(){
  5.     return a + b + c + m + n
  6.   }
  7.   return sum
  8. }
  9. fn(1, 2)()

执行过程继续如上，接着如下：
11. 当 fn 返回 sum 且继续执行时，执行栈情况如下

  1. ECStack = [
  2.   sumContext,
  3.   globalContext
  4. ]
  1. 在 sum 中没有变量 a，就需要从上级函数中找，此时执行栈中上级函数执行上下文已经被弹出被销毁，但上级函数的活动对象VO不会被销毁，在自身的执行上下文中的 ScopeChain 中保存有上级函数VO
  1. sumContext = {
  2.   VO: {},
  3.   ScopeChain: [sumContext.VO, fnContext.VO, globalContext.VO]
  4. }
  1. 这样就可以找到对应的变量，然后计算返回结果，执行结束。
  2. 弹出 sumContext，销毁 sum 的执行上下文，再继续销毁父级的执行上下文（fnContext）