JS 作⽤域

什么是作⽤域？

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

静态作⽤域和动态作⽤域

因为 JavaScript 采⽤的是词法作⽤域，函数的作⽤域在函数定义的时候就决定了。 ⽽与词法作⽤域相对的是动态作⽤域，函数的作⽤域是在函数调⽤的时候才决定的。

var value = 1;

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

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

bar();
// 结果是 ???

假设JavaScript采⽤静态作⽤域，让我们分析下执⾏过程：

执⾏ foo 函数，先从 foo 函数内部查找是否有局部变量 value，如果没有，就根据书写的位置，查找上⾯⼀层的代码，也就是 value 等于 1，所以结果会打印 1。

假设JavaScript采⽤动态作⽤域，让我们分析下执⾏过程：

执⾏ foo 函数，依然是从 foo 函数内部查找是否有局部变量 value。如果没有，就从调⽤函数的作⽤域，也就是 bar 函数内部查找 value 变量，所以结果会打印 2。

前⾯我们已经说了，JavaScript采⽤的是静态作⽤域，所以这个例⼦的结果是 1。

动态作⽤域

什么语⾔是动态作⽤域？

bash就是动态作⽤域，不信的话，把下⾯的脚本存成例如 scope.bash，然后进⼊相应的⽬录，⽤命令 ⾏执⾏ bash ./scope.bash，看看打印的值是多少。

value=1

function foo () {
    echo $value;
}

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

bar

思考

看⼀个⾯试题：

// case 1

var scope = "global scope";

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

    return f();
}

checkscope();

// case 2
var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}

checkscope()();

两段代码各⾃的执⾏结果是多少？

local scope

因为JavaScript采⽤的是词法作⽤域，函数的作⽤域基于函数创建的位置。

⽽引⽤《JavaScript权威指南》的回答就是：

JavaScript 函数的执⾏⽤到了作⽤域链，这个作⽤域链是在函数定义的时候创建的。嵌套的函数 f() 定义在这个作⽤域链⾥，其中的变量 scope ⼀定是局部变量，不管何时何地执⾏函数 f()，这种绑定在执⾏ f() 时依然有效。

但是在这⾥真正想让⼤家思考的是： 虽然两段代码执⾏的结果⼀样，但是两段代码究竟有哪些不同呢？

答案就是执⾏上下⽂栈的变化不⼀样。