JavaScript静态作用域与动态作用域

Posted 2021-10-02 战场小包

概述

在文章最开始，先学习几个概念：

• 作用域：《你不知道的js》中指出，作用域是一套规则，这套规则用来管理引擎如何在当前作用域以及嵌套的子作用域中根据标识符名称进行变量查找。简单来说，作用域规定了如何查找变量。
• 静态作用域：又称词法作用域，是指作用域在此法阶段就被确定了，不会改变。
• 动态作用域：函数的作用域在函数调用时才决定的。

静态作用域与动态作用域

javascript采用的是词法作用域，函数定义的位置就决定了函数的作用域。
具体看一个例子：

var val = 1;
function test() {
    console.log(val);
}
function bar() {
    var val = 2;
    test();
}

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

最终的输出结果是1，说明test打印的是全局下的val，这也印证了JavaScript使用了静态作用域。

在学习词法作用域之前，已经学习了作用域链和预编译过程，虽然有几分本末倒置，但是对词法的理解还是有一定帮助。

静态作用域执行过程

当函数执行test函数时，先从内部的AO对象查找是否有val对象，如果没有，沿着作用域链往上查找(由于JavaScript是词法作用域)，上层为全局GO，所以结果打印1

动态作用域执行过程

但如果JavaScript采用的动态作用域，执行test函数，从函数内部查询val变量，如果没有，就调用函数的作用域，即bar函数的作用域，成功查询到val=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，JavaScript采用词法作用域，上述两个函数都定义在checkscope中，所以当f()函数执行时，首先查询自身作用域是否有scope变量，如果没有，它们的上级作用域都是checkscope，所以输出local scope。

对此《JavaScript权威指南》解释到：JavaScript 函数的执行用到了作用域链，这个作用域链是在函数定义的时候创建的。嵌套的函数 f() 定义在这个作用域链里，其中的变量 scope 一定是局部变量，不管何时何地执行函数 f()，这种绑定在执行 f() 时依然有效。

如果想更深入、更透彻的理解上面的知识，建议深入学习作用域链和预编译的知识。

参考博客：JavaScript深入之词法作用域和动态作用域