JavaScript作用域及作用域链

[xchunzhao]

作用域

---

关于作用域,在前面介绍执行上下文的时候提及到，执行上下文中有个外部引用，各个执行上下文的外部引用全都链接起来就形成作用域链。

• 作用域是指程序源代码中定义变量的区域。
• 作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限。
• JavaScript 采用词法作用域(lexical scoping)，也就是静态作用域。

静态作用域

---

JavaScript使用静态作用域，那与之相对应的动态作用域的区别是什么？

• 静态作用域是指函数的作用域在函数定义的时候就决定
• 而动态作用域是函数的作用域在函数调用的时候决定

简单来段代码：

var value = 1;
function foo() {
    console.log(value);
}

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

// ???结果是

分析一下执行过程：

执行foo函数，遇到console.log(value),开始查找foo内部有无value变量定义，没有的话，往上级查找。结果为1。

再回忆之前介绍执行上下文，执行上下文的词法环境包括了两点:

• 环境记录：存储变量和函数声明
• 对外部环境的引用

词法环境的确立是在创建执行上下文阶段，而不是在执行阶段，而对外部环境的引用链接就是作用域链，从而论证了JavaScript的作用域是静态作用域。

---

我们由一个思考题慢慢引出闭包：

Q1
var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f();
}
checkscope();

Q2
var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}
checkscope()();

先来看看Q1，执行过程为：

• 执行checkscope函数，进入checkscope内部，返回值为f函数的返回值。
• 再进入到f函数内部，返回scope。
• 查找f函数内部有无scope，没有就往上级查找，scope = 'local scope',所以f函数的返回值为'local scope',结果为'local scope'。

而Q2的执行过程呢：

• 执行checkscope()函数，没有checkscope()函数，猜测checkscope函数内部返回一个函数。
• 进入到checkscope函数，返回f函数。
• 进入f函数，返回scope。
• 查找f函数内部有无scope,没有就往上级查找，f函数返回值为'local scope'。
• 最终结果为'local scope'