JavaScript之执行上下文、变量对象、作用域链

当 JavaScript 代码执行一段可执行代码(executable code)时，会创建对应的执行上下文(execution context)。
对于每个执行上下文，都有三个重要属性：

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

具体执行分析

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}
checkscope()();

执行过程如下：

1. 进入全局代码，创建全局执行上下文，圧入执行上下文栈

ECStack = [
    globalContext
];

2. 全局执行上下文初始化

globalContext = {
    VO: [global],     // 变量对象
    Scope: [globalContext.VO],   //作用域链
    this: globalContext.VO
}

初始化同时，checkscope函数被创建，保存作用域链到函数内部属性[[scope]]

checkscope.[[scope]] = [
    globalContext.VO
];

3. 执行checkscope函数，创建checkscope函数执行上下文，圧入执行上下文栈

ECStack = [
    checkscopeContext,
    globalContext
];

4. checkscope函数执行上下文初始化 (代码创建阶段)

   1. 复制函数[[scope]]属性创建作用域链

   checkscopeContext = {
       Scope: checkscope.[[scope]]
   }
   

   2. 用 arguments 创建活动对象，随后初始化活动对象，加入形参、函数声明、变量声明

   checkscopeContext = {
       AO: {
           arguments: {
               length: 0
           },
           scope: undefined,
           f: reference to function f(){}
       },
       Scope: checkscope.[[scope]]
   }
   

   3. 将活动对象圧入checkscope作用域链顶部

   checkscopeContext = {
       AO: {
           arguments: {
               length: 0
           },
           scope: undefined,
           f: reference to function f(){}
       },
       Scope: [AO, checkscope.[[scope]]]
   }
   

5. 执行checkscope函数，修改 AO 的属性值 (代码执行阶段)

checkscopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope: 'local scope',
        f: reference to function f(){}
    },
    Scope: [AO, checkscope.[[scope]]],
    this: undefined
}

6. checkscope 函数执行完毕，checkscope 执行上下文从执行上下文栈中弹出

ECStack = [
    globalContext
];

同时f函数被创建，保存作用域链到函数内部属性[[scope]]

f.[[scope]] = [
    checkscopeContext.AO,
    globalContext.VO
];

7. 执行f函数，创建f函数执行上下文，圧入执行上下文栈

ECStack = [
    fContext,
    globalContext
];

8. f函数执行上下文初始化（同上）

fContext = {
    AO: {
        arguments: {
            length: 0
        }
    },
    Scope: [AO, f.[[scope]]]
}

9. 执行f函数，修改 AO 的属性值，查找到 scope 的值，返回scope值
   沿着作用域链向上查找： 闭包
   fContext.AO (未找到) -> checkscopeContext.AO（找到）

   闭包：

• 即使创建它的上下文已经销毁，它仍然存在（比如，内部函数从父函数中返回）
• 在代码中引用了自由变量

10. f函数执行完毕，f函数上下文从执行上下文栈中弹出

ECStack = [
    globalContext
];

参考：JavaScript深入之执行上下文