一、作用域

作用域是程序源代码中定义变量的区域。

作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限。

ECMAScript6之前只有全局作用域和函数作用域（没有块级作用域）。

作用域有静态作用域与动态作用域之分。

JavaScript采用词法作用域(lexical scoping)，也就是静态作用域。

1.静态作用域与动态作用域

区别：一个声明起作用的那一段程序文本区域，则称为这个声明的作用域。

静态作用域是指声明的作用域是根据程序正文在编译时就确定的，有时也称为词法作用域。

而在采用动态作用域的语言中，程序中某个变量所引用的对象是在程序运行时刻根据程序的控制流信息来确定的。

大多数现在程序设计语言都是采用静态作用域规则，而只有为数不多的几种语言采用动态作用域规则，包括APL、Snobol和Lisp的早期方言

因为采用词法作用域，函数的作用域在函数定义的时候就决定了。

与词法作用域相对的是动态作用域，函数的作用域在函数调用的时候才决定。

让我们认真看个例子就能明白之间的区别：

var value = 1;

function foo() {
    console.log(value);
}

function bar() {
    var value = 2;
    foo();
}

bar();

当采用静态作用域时，执行foo函数，先从foo函数内部查找是否有局部变量value，如果没有，就根据书写的位置，查找上面一层的代码，在这里是全局作用域，也就是value等于1，所以最后会打印1

当采用动态作用域时，执行foo函数，依然是从foo函数内部查找是否有局部变量value。如果没有，就从调用函数的作用域，也就是bar函数内部查找value变量，所以最后会打印2

2.动态作用域

也许你会好奇什么语言是动态作用域？

bash就是动态作用域，不信的话，把下面的脚本存成例如scope.bash，然后进入相应的目录，用命令行执行 bash ./scope.bash，看看打印的值是多少

value=1
function foo () {
    echo $value;
}
function bar () {
    local value=2;
    foo;
}
bar

二、作用域链

1.概念

在《JavaScript深入之变量对象》中讲到，当查找变量的时候，会先从当前上下文的变量对象中查找，如果没有找到，就会从父级(词法层面上的父级)执行上下文的变量对象中查找，一直找到全局上下文的变量对象，也就是全局对象。这样由多个执行上下文的变量对象构成的链表就叫做作用域链。

下面，让我们以一个函数的创建和激活两个时期来讲解作用域链是如何创建和变化的。

2.函数创建

在《JavaScript深入之词法作用域和动态作用域》中讲到，函数的作用域在函数定义的时候就决定了。

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

举个例子：

function foo() {
    function bar() {
        ...
    }
}

函数创建时，各自的[[scope]]为：

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

bar.[[scope]] = [
    fooContext.AO,
    globalContext.VO
];

3.函数激活

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

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

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

至此，作用域链创建完毕。

4.捋一捋

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

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

执行过程如下：

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

1
2
3

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

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

ECStack = [
    checkscopeContext,
    globalContext
];

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

1
2
3

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

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

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

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

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

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

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

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

1
2
3

ECStack = [
    globalContext
];

5.延长作用域链

原理：有些语句可以在作用域链的前端加一个变量对象，该对象在代码执行后会被移除

方法：

1.try-catch

2.with

参考

静态作用域和动态作用域：https://www.cnblogs.com/lienhua34/archive/2012/03/10/2388872.html

冴羽：

深入词法作用域和动态作用域

https://juejin.cn/post/6844903473012539405

深入作用域

https://juejin.cn/post/6844903473683628046

《JS高级程序设计》