javascript - 变量作用域和 Var

Question

这一切都始于这些简单的代码行:

a = 3;
b = 2;

function line(x) {
    var a = 5;
    var b = 4;

    return a*x+b;
}

// returns 17
b = line(a) - b;
alert(b);

// returns 36
c = line(a) + b;
alert(c);

两个警报分别返回 17 和 36。
该控件按预期工作。直到……

我改错了
函数内部像这样:

function line(x) {
    var a = 5; 
        b = 4;

    return a*x+b;
}

突然第13行返回15，第17行返回23
当我跟随 var 时，情况继续恶化
在兔子洞里，随着我下降而变得更加陷入困境。

我意识到我可以记下始终使用 var
安息吧，我的代码将始终按预期工作
但这现在已经成为原则问题，现在我需要
了解 var 的实际工作原理。

这里有四个 hell 的链接，
由我(也可能为)我制作:

谜语 #1 http://jsfiddle.net/js_test/gNEmY/

谜语#2 http://jsfiddle.net/js_test/FJVYL/

谜语 #3 http://jsfiddle.net/js_test/Vz7Sd/

谜语 #4 http://jsfiddle.net/js_test/RaA5J/

如果有人能给我一些见解
了解引擎盖下发生的事情
也就是说，每次调用 alert() 时会发生什么；
我真的很感激。

Answer 1

var 创建一个局部变量，作用域为它出现的函数。在全局范围内声明的任何变量都成为全局对象的属性(在浏览器中，window)，以及在函数中引用的任何未使用 var 声明的变量> 在那个函数中指的是周围的范围，很可能是全局范围。

还有一个新的关键字，let，它将出现在即将发布的 ECMAScript 版本中，并且已经出现在一些浏览器中，它创建了一个 block 范围的变量。

因此，在您的第一个示例中(我假设它在浏览器中运行)，您创建了 window.a 和 window.b ，它们绑定(bind)到分别为 3 和 2。函数 line 声明了局部变量 a 和 b。当 window.a 传递给 line 时，参数 x 被绑定(bind)到值 3(window.a 的值)。局部变量a 和b 分别为5 和4。 这些与 window.a 和 window.b 无关。计算 a*x+b 因此是 5*3+4，即 19。 p>

代码b = line(a) - b将window.a传递给line，计算出值19，减去当前值window.b 从它 (2)，得到 17，然后将其分配给 window.b。 36的值来自line(3)(仍然是19)加上17(window.b的新值)。

当您在函数 line 中从对 b 的赋值中删除 var 时，您更改了它以便 b 不再是局部变量。 在这种情况下，函数中对 b 的所有引用都引用全局值 window.b。

在你的 Riddle #2 的情况下，你得到 23，在第一次调用 window.b 后等于 15。当 line(a) 被第二次调用时，window.b 被设置回 4， a*x+b计算还是得到19，然后再次加上window.b(4)，得到23。

重要的是要注意，var 关键字声明的变量是函数范围的，而不是您可能对其他 C 派生语言所期望的 block 范围的变量。例如，在这个函数中:

function scope(array) {
    var a = 7;

    for (var b = 0; b < array.length; ++b) {
        var c = array[b];
    }

    alert(a + b + c);
}

所有变量的范围都扩展到整个函数。特别是，c 的范围不限于for 循环。

但是，未在特定范围内声明的变量不一定引用全局变量。如果它嵌套在另一个函数范围内，它将引用该嵌套范围。考虑以下示例:

var b = 7;

function outer() {
    var b = 42;

    function inner() {
        return b; // refers to b in outer, not global
    }

    return inner();
}

alert(outer()); // 42, not 7