深刻做用域链

在以前的 执行上下文 中已知 JavaScript 代码执行一段可执行代码时，会建立对应的 执行上线文(execution context)

在建立执行上下文时，随之建立的三个属性：

• 变量对象(Variable Object, Vo)
• 做用域链(Scope chain)
• this

做用域链

结合 变量对象 来讲，上下文中查找变量的时候，会先从当前上下文的变量对象中查找，若是没有找到，就会从父级(词法层面的父级)执行上下文的变量对象中查找，一直找到全局上下文的变量对象，也就是全局对象。这样有多个执行上下文的变量对象构成的链表，就叫作做用域链。

下面，从一个函数的建立和激活两个时期讲解做用域链是如何建立和变化的：

函数建立

已知 JavaScript 中的函数做用域采用的是词法做用域，在函数定义的时候就决定了的。

这是由于函数有一个内部属性 [[scope]], 当函数建立的时候，就会保存全部父变量对象到其中，能够理解 [[scope]] 就是全部父变量对象的层级链，可是 [[scope]] 并不表明完整的做用域链！

以下：

    // 函数声明，一个函数被建立
    function foo() {
        function bar() {

        }
    }

    // 此时 foo 未被调用，上下文中的代码未执行，bar 未被声明
    // foo 和 bar 的 [[scope]] 为：
    foo.[[scope]] = [
        globalContext.VO  // VO 变量对象，这里是全局的变量对象 window
    ];

    bar.[[scope]] = [
        fooContext.AO,  // bar 将在 foo 被调用时声明，[[scope]] 将包含 foo 的活动对象
        globalContext.VO
    ];
复制代码

函数激活

当函数激活时，进入函数上下文，建立 AO/VO 后，就会将活动对象添加到做用域链的前端。 这时候执行上下文的做用域，咱们命名为 Scope： Scope = [AO].concat([[Scope]]);

至此，做用域链建立完毕

结合变量对象和执行上下文栈，总结一下函数执行上下文中做用域链和变量对象的建立过程：

var scope = "global scope";
    function checkscope() {
        var scope2 = 'local scope';
        return scope2;
    }
    checkscope();
复制代码

执行过程以下：

1. 执行流进入程序，进入全局上下文，建立变量对象，将 上下文中的 变量函数声明添加到变量对象中
   • 函数 checkscope 被声明建立的同时，保存词法父级做用域链

globalContext.VO = window = {
        scope：undefined,
        checkscope: function () { }
    }

    checkscope.[[scope]] = [
        globalContext.VO
    ];
复制代码

2. 执行流遇到 checkscope 调用，建立 checkscope 函数执行上下文，checkscope 函数执行上下文被压入执行上下文栈

ECStack = [
        checkscopeContext,
        globalContext
    ];
复制代码

3. 执行流进入 checkscope 函数上下文，开始准备工做，也就是所谓的 编译阶段 3.1 第一步：复制函数的 [[scope]] 属性建立属于本身的做用域链，此时并非完整的做用域链

checkscopeContext = {
        Scope: checkscope.[[scope]],
    }
复制代码

3.2 第二步：用 arguments 建立活动对象，随后初始化活动对象，加入形参、函数声明、变量声明

checkscopeContext = {
        AO: {
            arguments: {
                length: 0
            },
            scope2: undefined
        }，
        Scope: checkscope.[[scope]],
    }
复制代码

3.3 第三步：将建立好的 活动对象 压入 checkscope 做用域顶端

checkscopeContext = {
        AO: {
            arguments: {
                length: 0
            },
            scope2: undefined
        },
        Scope: [AO, [[Scope]]]
    }
复制代码

4. checscope 函数上下文的做用域链、活动对象 建立完毕，准备工做作完，开始执行函数，随着函数的执行，修改 AO 的属性值

checkscopeContext = {
        AO: {
            arguments: {
                length: 0
            },
            scope2: 'local scope'
        },
        Scope: [AO, [[Scope]]]
    }
复制代码

5. 查找到 scope2 的值，返回后函数执行完毕，函数上下文从执行上下文栈中弹出

ECStack = [
        globalContext
    ];

复制代码

小结

1. 在引擎每进入一段可执行代码段时，会先建立一个执行上下文，将这个执行上下文压入执行上下文栈;
2. 而后执行流进入该执行上下文中，一个执行上下文的执行，分为两个阶段，编译阶段和执行阶段;
3. 编译阶段所作的是一些准备工做，

   第一步： 先将函数定义时就肯定的父级做用域链(也就是词法上的父级执行环境的变量对象) 复制，做为当前上下文的做用域链，此时的做用域链并非完整的; 第二步： 建立 活动对象，随后初始化活动对象，将上下文中的形参、函数声明、变量声明 以键值对的形式，存储在活动对象中，在活动对象建立完毕后; 第三步： 将自身的活动对象压入本身的做用域链的顶端，至此完成做用域链的建立。

4. 完成上下文的准备阶段后，进入代码执行阶段，由上至下顺序执行，修改活动对象中的键值;
5. 当上下文中的代码执行完毕，将上下文弹出上下文栈，将执行权返还给上层上下文;
6. 执行流重复如上步骤，直至执行彻底局上下文。