重学javascript之作用域链

前言

上一篇：重学javascript之执行上下文栈juejin.cn/post/695048…

每个执行上下文都有三个重要的属性：

• 变量对象
• 作用域链
• this 本章讲解：深入分析javascript之作用域链

不忘初心，牢记使命

很多同学看到这里的时候可能会认为：“js基础太简单啦，有必要写吗？”。的确，相对于初学js的我们，现在回顾是很简单，但是自然界有一个规律的，也包括我们学习前端知识，那就是掌握真理，返璞归真，才能在走向升华的路上愈发坚实！

正文

什么是作用域链

推荐链接

• 重学javascript之变量对象： juejin.cn/post/695062…
• 重学javascript之词法作用域和动态作用域
• 重学javascript之执行上下文栈： juejin.cn/post/695048… 基于上面三篇文章之上，我们知道javascript查找变量的时候，会依次从当前上下文、词法层面上的父级执行上下文、全局执行上下文 的变量对象中查找。这个由多个执行上下文的变量对象构成的链表叫做作用域链。

作用域链的创建和变化

• 作用域链的创建（从函数的创建为出发点分析）

我们知道javascript中函数的作用域是在函数的定义的时候就决定了。

函数有一个内部属性[[scope]]，当函数创建的时候，会保存所有父变量对象[[scope]]中，可以理解[[]]是所有父变量对象的层级链，但是[[scope]]并不代表完整的作用域链

eg:

function test() {
    function son() {
        ...
    }
}

函数创建的时候，各自的scope是；

test.[[scope]] = [
    globalContext.VO
]

son.[[scope]] = [
    testContext.AO,
    globalContext.VO
]

• 函数激活

当函数激活时，进入函数上下文，创建 VO/AO 后，就会将活动对象添加到作用链的前端。

这时候执行上下文的作用域链，我们命名为 Scope：

Scope = [AO].concat([[Scope]]);

接下来说一下： 函数执行上下文中作用域链和变量对象的创建过程

var globalValue = "global scope"
function test() {
    var localValue = "local";
    return localValue;
}
test();

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

test.[[scope]] = [
    globalContext.VO
]

2. 执行test函数,创建test函数执行上下文，并压入执行上下文栈

ECStack = [
    testContext,
    globalContext
]

3. 在函数执行上下文中创建作用域链

testContext = {
    Scope: test.[[scope]]
}

4. 在函数执行上下中创建活动对象

testContext = {
    AO: {
        arguments: {
            length: 0
        },
        localValue: undefined
    },
    Scope: test.[[scope]]
}

5. 将活动对象压入作用域链顶端

testContext: {
    AO: {
        arguments: {
            length: 0
        },
        localValue: undefined
    },
    Scope: [AO, [[Scope]]]
}

6. 开始执行函数，随这函数的执行，修改AO的属性值

testContext = {
    AO: {
        arguments: {
            length: 0
        },
        localValue: "local"
    }
    Scope: [AO, [[Scope]] ]
}

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

ECStack = [
    globalContext
]