细读 JavaScript 之静态做用域与动态做用域区别

静态做用域与动态做用域区别

看到标题，相信你们有点懵逼，什么是静态做用域？什么又是动态做用域？先抛开这些不谈，咱们先来看一个题目，这个题目来自于《你不知道的 JavaScript》（上）。

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

function bar(){
    var a = 3;
    foo();
}

var a = 2;

bar();

复制代码

执行以上代码，输出是什么？咱们发现输出是2？这是啥状况，为何不是 3，而是 2？究竟是什么缘由形成的？由于 JavaScript 是采用词法做用域的，那么 a 在 foo 函数内找不到，那么按照词法做用域， a 会去函数定义时的环境中找，也就是 2。

静态做用域

静态做用域（即词法做用域）中的函数遇到既不是形参也不是函数内部定义的局部变量的变量时，会去函数定义时的环境中查询。

动态做用域

动态做用域中的函数遇到既不是形参也不是函数内部定义的局部变量的变量时，到函数调用时的环境中查。

---

既不是形参也不是函数内部定义的局部变量的变量即自由变量。形参或函数内部定义的局部变量即约束变量。

经过上面的描述，咱们再看一题。

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


复制代码

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

复制代码

猜猜两段代码各返回什么？两段代码都返回 local scope。由于 scope 在 f 函数内找不到，因此会在函数定义时的做用域查找，因此是 local scope。

参考

• 动态做用域和词法域的区别是什么？
• JavaScript深刻之词法做用域和动态做用域