# 作用域链

JavaScript 执行一段可执行代码时，会创建对应的执行上下文，那么每个执行上下文中都有哪些内容？

执行上下文 3 个重要的属性:

变量对象(Variable Object，VO)
作用域链(Scope Chain)
this

这节主讲作用域链

# 什么是作用域链

在变量对象中，当查找变量的时候，对象中会先从当前执行上下文中的变量对象中查找变量（当前作用域），如果没有找到，就会从父级（词法层面的父级：书写位置）执行上下文中的变量对象中查找变量（父级作用域），一直到全局上下文的变量对象中，也就是全局对象中（全局作用域）。这样由多个执行上下文的变量对象构成的链叫做 作用域链。

作用域链（Scope Chain）是一个非常重要的概念，它决定了如何查找变量，即确定了在何处查找变量的顺序。作用域链是在执行上下文（execution context）被创建时构建的，它由一系列可访问的作用域组成，这些作用域按照特定的顺序链接在一起。 JavaScript 引擎会从当前作用域开始查找该变量，如果当前作用域中没有找到，就会沿着作用域链向上查找，直到全局作用域。如果在全局作用域中仍然没有找到该变量，就会返回 undefined。

函数的作用域在函数定义时就确定了。

以一个函数的创建和激活两个时期来讲解作用域链是如何创建和变化的：

# 函数创建时的作用域

函数的作用域在函数定义的时候就决定了。因为函数有一个内部属性 [[scope]]，当函数创建的时候，就会保存所有父变量对象到其中， [[scope]] 就是所有父变量对象的层级链，但是注意：[[scope]] 并不代表完整的作用域链！

# 函数激活后的作用域

函数激活，进入函数上下文，创建 VO、AO 对象后，就会将 AO 添加到作用域链的前端。这时候执行上下文的作用域链，我们命名为 Scope：Scope = [AO].concat([[Scope]])，至此，作用域链创建完毕。

# 捋一捋

以下面的例子为例，结合着之前讲的变量对象和执行上下文栈，我们来总结一下函数执行上下文中作用域链和变量对象的创建过程：

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

1
2
3
4
5
6

执行过程如下：

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

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

1
2
3

执行 checkscope 函数，创建 checkscope 函数执行上下文，checkscope 函数执行上下文被压入执行上下文栈

ECStack = [
    checkscopeContext,
    globalContext
];

1
2
3
4

checkscope 函数并不立刻执行，开始做准备工作，第一步：复制函数 [[scope]] 属性创建作用域链

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

1
2
3

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

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

1
2
3
4
5
6
7
8
9

第三步：将活动对象压入 checkscope 作用域链顶端

checkscopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: undefined
    },
    Scope: [AO, [[Scope]]]
}

1
2
3
4
5
6
7
8
9

准备工作做完，开始执行函数，随着函数的执行，修改 AO 的属性值

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

1
2
3
4
5
6
7
8
9

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

ECStack = [
    globalContext
];

1
2
3

# 总结

checkscope 函数创建的时候，保存的是根据词法所生成的作用域链，不是其完整的作用域链。Checkscope 函数执行的时候，会复制（引用类型的复制）这个作用域链，作为自己作用域链的初始化，然后根据环境生成变量对象，然后将这个变量对象，添加到这个复制的作用域链，这才完整的构建了自己的作用域链。至于为什么会有两个作用域链，是因为在函数创建的时候并不能确定最终的作用域的样子，为什么会采用复制的方式而不是直接修改呢？应该是因为函数会被调用很多次吧。ES5 开始，已经修改了通过变量对象升为活动对象的机制了。引入了词法环境和变量环境。
作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到 window 对象即被终止，作用域链向下访问变量是不被允许的。
当你定义（书写）一个函数的时候（并未调用），js 引擎也能根据你函数书写的位置，函数嵌套的位置，给你生成一个 [[scope]]，作为该函数的属性存在（这个属性属于函数的）。即使函数不调用，所以说基于词法作用域（静态作用域）。然后进入函数执行阶段，生成执行上下文，执行上下文你可以宏观的看成一个对象，（包含 vo, scope, this），此时，执行上下文里的 scope 和之前属于函数的那个 [[scope]] 不是同一个，执行上下文里的 scope，是在之前函数的 [[scope]] 的基础上，又新增一个当前的 AO 对象构成的。函数定义时候的 [[scope]] 和函数执行时候的 scope，前者作为函数的属性，后者作为函数执行上下文的属性。
从 v8 角度看函数的作用域：这是 v8 编译的结果，v8 有惰性编译，在开始编译时遇到函数会保存其为函数对象，在编译顶层代码为 ast 与字节码再去执行。这是为了优化执行速度，因为大部分函数在执行顶层代码时是不会执行的。但是有个问题，函数的执行上下文栈中的变量都是存在与栈中的，而 js 的函数有闭包性质。如果外层的函数执行结束它的作用域也会被销毁，那栈中的变量同时也被销毁。这就有了预解析。顺序就是预解析 -> 解析 -> 编译执行。预解析也只查看函数的语法与是否引用外部变量。

参考文献

JavaScript深入之作用域链 (opens new window)

← 变量对象 This →