了解 JavaScript 函数作用域

Question

下面的代码是 JavaScript 代码。我正在尝试了解 JavaScript 中的函数范围，并关注here 上的文章。我正在复制下面的代码 -

var cow = "purple"; // just a random cow

var f = function (x) {
    var r = 0;
    cow = "glue";
    if (x > 3) {
        var cow = 1; // a local variable
        r = 7;
    }
    return r;
};

var z = f(2);
alert(cow); // returns purple

我不太明白为什么会提示字符串“purple”。 cow = "glue"; 行应该将 cow 变量的值设置为“glue”。如果我删除 if 块，然后在最后一个语句中警告牛，我会看到字符串“glue”被警告。

当调用 f(2) 时，没有输入 if 代码块并且其中没有任何内容被执行，那么为什么我会看到不同的结果？即为什么最后一条语句中的 alerting cow 现在返回字符串“purple”？

Answer 1

函数内部的变量声明总是被提升到顶部。所以你的代码实际上是：

var f = function (x) {
    var cow, r;
    r = 0;
    cow = "glue";
    if (x > 3) {
        cow = 1; // a local variable
        r = 7;
    }
    return r;
};

在您总是分配给本地 cow 的函数内部，而不是全局。

Answer 2

这里要理解的两件事是 Javascript 变量被提升到其作用域的顶部，并且 javascript 没有块作用域。

所以

1. 作用域中的所有变量都被认为是在作用域的开头声明的
2. if 语句不会创建新范围。

所以你的例子相当于

var cow = "purple"; // just a random cow

var f = function (x) {
    var cow, r = 0;
    cow = "glue";
    if (x > 3) {
        cow = 1; // a local variable
        r = 7;
    }
    return r;
};

var z = f(2);
alert(cow); // returns purple

if 语句中的 var 声明被提升到顶部。此时，函数内的所有奶牛引用都指向局部变量奶牛，而不是外部作用域中的奶牛。

Answer 3

Javascript 没有块作用域（catch 块除外）。
所有var 语句都提升到包含函数的顶部。

因此，cow 引用函数中任意位置的局部变量，即使 if 从未执行。

Answer 4

您并没有真正阅读那篇文章，是吗？它明确指出

当您调用 f(2) 时，cow 是否会变成 "glue"？不，cow 在上述代码中是安全的，因为 if 块内的 var cow 声明适用于整个函数。也就是说cow是整个函数的局部变量。

但是，当您删除 if 块时，您也会删除其中的变量声明，并且赋值将针对全局变量。