细说JavaScript词法作用域与动态作用域

我们一直都知道作用域这个词，非常熟悉JavaScript的局部作用域与全局作用域，但今天要说的是比较多人不知道的词法作用域与动态作用域。

在那之前我们先看两道题。

var scope = "global scope";
function checkScope() {
    var scope = "local scope";
    function fn() {
        return scope;
    }

    return fn();
}

checkScope();

var scope = "global scope";
function checkScope() {
    var scope = "local scope";
    function fn() {
        return scope;
    }

    return fn;
}

checkScope()();

先不说答案，我们来看下词法作用域与动态作用域。

词法作用域：函数在定义的时候决定了函数的作用域，JavaScript采用词法作用域。
动态作用域：函数在调用的时候决定函数的作用域，目前只有部分语言支持。

我们来看下下面例子。

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

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

bar();

采用词法作用域则打印10，若动态作用域则为20。

在词法作用域的情况下，函数foo在函数bar中调用，但其作用域在定义时已经确定，即只能访问到foo函数内部跟全局作用域。

若在动态作用域的情况下，函数foo在函数bar中调用，其作用域在调用的时候确定，即只能访问到函数bar内部跟全局作用域。

---

现在回到开头的两道题，两个都是打印"local scope"。

var scope = "global scope";
function checkScope() {
    var scope = "local scope";
    function fn() {
        return scope;
    }

    return fn();
}

checkScope();

var scope = "global scope";
function checkScope() {
    var scope = "local scope";
    function fn() {
        return scope;
    }

    return fn;
}

checkScope()();

我们刚才说了在JavaScript中函数作用域在定义的时候已经确定，而题1跟题2的区别就是函数fn的在不同位置执行，但这并不影响函数作用域，所以两个都是打印"local scope"