了解 Javascript 中的全局和局部范围

Question

我一直在使用 Object-Oriented JavaScript by Stoyan Stefanov 学习 Javascript

他提供了一个比较全局和本地范围的示例：

var a = 123;
function f() {
    alert(a);
    var a = 1;
    alert(a);
}
f();

看这个例子，我预计第一个警报是“123”，第二个警报是“1”。瞧，斯托扬说：

您可能期望第一个 alert() 将显示 123（值 全局变量 a) 和第二个将显示 1 (本地 a)。 不是这种情况。第一个警报将显示“未定义”。这是 因为在函数内部，局部作用域比 全球范围。因此，局部变量会覆盖任何全局变量 同名。在第一个 alert() 的时候还没有定义 （因此值未定义）但它仍然存在于本地空间中。

我的解释不清楚，局部变量如何覆盖第一个警报中的全局变量？任何其他/不同的解释将不胜感激。

Answer 1

简单来说，首先考虑变量和函数的所有声明。因此，本地var a 实际上只会在本地范围内覆盖全局变量，并且没有任何值，即undefined。所以第一个警报将显示undefined。第二个警报将显示 1，因为它在 a = 1 之后。这只是在本地发生，全局变量 a 的值为 123 - 它不会被更改。

另一个使用函数的例子来展示它是如何工作的

 function show(){
    alert("I am global");
 }

 function f() {

    show();

    show = function(){
       alert("I am second");
    }  

    show();   

    function show(){
        alert("I am first");
    }

}
f();
show();

Answer 2

它没有覆盖全局变量。正在发生的事情称为“变量提升”。也就是说，var a; 被插入到函数的顶部。

脚本引擎将您的脚本更改为以下内容：

var a = 123;
function f() {
    var a;
    alert(a);
    a = 1;
    alert(a);
}
f();

要学习的课程：始终在使用变量之前声明它们。有人会说在函数顶部声明所有变量。