关于 Javascript 执行上下文的说明

Question

我一直在努力巩固我对 JS 执行上下文的理解，但无法解释为什么下面的代码没有打印出“hello world”。

var foo = "foo";

function test1() {
    console.log(foo)
    var bar = "hello world";
    test2();
}

function test2() {
    console.log(bar);
}

test1();

我（诚然非常不可靠）理解test2() 在test1() 内部执行，可以访问test1() 的执行上下文，并且应该能够通过向上移动来解析变量名称bar作用域链进入test1() 的执行上下文，其中定义了bar。相反，我在尝试打印 bar 时收到参考错误。

由于 JS 的词法作用域，我可以理解下面的代码是如何工作的，但我希望能解释一下 JS 在执行上下文和作用域链方面如何以不同的方式解释它们。

function test1() {
    console.log(foo)
    var bar = "hello world";
    function test2() {
        console.log(bar);
    }
    test2();
}

test1();

到目前为止，我自己寻找解释的最佳尝试是修改第一个代码块，如下所示：

var foo = "foo";
var bar = "not hello world :("

function test1() {
    console.log(foo)
    var bar = "hello world";
    test2();
}

function test2() {
    console.log(bar);
}

test1();

在这里，对test2() 的调用会打印出在全局范围内定义的“not hello world :(”。我的第一个想法是test2() 正在沿着范围链上升到test1 的执行上下文，全局执行上下文,但这似乎不对,因为它会在到达全局定义之前在test1()内部找到bar的定义.因此,我的第二个猜测是test2()的定义正在创建在定义全局执行上下文时进行类似“闭包”的捕获，并在 test1() 内调用它会为 bar 生成 null/undefined 的值，因为这是它在函数定义时的值（根本没有声明被提升）。因此，它不会向上移动到 test1() 的执行上下文中来搜索标识符。

任何解释/资源都会非常有帮助。我显然对这门语言很陌生，所以如果我的词汇/术语不太正确，请道歉。提前感谢您的帮助。

Answer 1

从哪里调用它和调用者的范围无关紧要。解析局部变量的关键在于它的声明位置。

test2() 无法访问bar，因为在声明函数时该范围内没有名为bar 的变量。事后无法操纵该本地范围。这是一成不变的。

这意味着函数可以访问本地范围内的变量，或者任何包含该函数声明的范围内的变量。这意味着遵循包含该函数声明的大括号 {} 一直回到文件的根目录。把它想象成一棵树：你的函数可以访问该函数和树根之间的任何变量。它不会访问该树的其他分支。

---

这是一件非常好的事情。它强制执行良好的封装。从调用者的角度来看，您希望您的函数是一个黑匣子。您希望函数中的局部变量是真正的局部变量。并且您想知道在您编写函数时函数可以访问哪些变量，而不是在运行函数时对弹出的值感到惊讶。 p>