深入作用域链

889 阅读4分钟

在之前的 执行上下文 中已知 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
    ];
  1. 执行流遇到 checkscope 调用,创建 checkscope 函数执行上下文,checkscope 函数执行上下文被压入执行上下文栈
    ECStack = [
        checkscopeContext,
        globalContext
    ];
  1. 执行流进入 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]]]
    }
  1. checscope 函数上下文的作用域链、活动对象 创建完毕,准备工作做完,开始执行函数,随着函数的执行,修改 AO 的属性值
    checkscopeContext = {
        AO: {
            arguments: {
                length: 0
            },
            scope2: 'local scope'
        },
        Scope: [AO, [[Scope]]]
    }
  1. 查找到 scope2 的值,返回后函数执行完毕,函数上下文从执行上下文栈中弹出
    ECStack = [
        globalContext
    ];

小结

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

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

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