函数、全局变量和局部变量

Question

我不明白为什么测试后的 x 不会变成 30 但仍然是 10

  <script>
        function test(){
            var x = 30;
            y = 40;
        }
    </script>


    <script>
        var x = 10;
        var y = 20;

        document.write("before test, x: " + x + ", y: " + y + "<br/><br/>");

        test();

        document.write("after test, x: " + x + ", y: " + y + "<br/><br/>");

    </script>

Answer 1

这是因为通过声明 var x = 30;，您创建了一个名为 x 的变量，该变量仅存在于函数的范围内。

然而，变量y 仅在顶层定义。因此，当您运行函数test 时，您编辑了本地x 变量和全局（顶级）y 变量。

Answer 2

当您定义变量时，它们会被提升到其范围的顶部。让我向您展示您当前的代码：

function test(){
  var x = 30;
  y = 40;
}
var x = 10;
var y = 20;
test();

会这样运行：

// global scope
var x; // x is undefined
var y; // y is undefined
function test() {
  // function scope
  var x; // x is undefined inside this scope
  x = 30; // x is assigned with value 30
  y = 40; // y is assigned with value 40
  // the global scope y value is assigned
}
x = 10; // x is assigned with value 10
// the global scope x value is assigned
y = 20; // y is assigned with value 20
// the global scope y value is assigned
test();
// when calling test,
// you see x is assigned with its function scope
// and y is assigned with its global scope
// so, at this point
// x becomes 10
// y becomes 40

---

您可以在docs 中阅读有关var 的更多信息。另外，查看scope、global scope 和local scope。

---

另外，请注意let 和const 的工作方式不同。它们的范围在块中。您可以在此处链接的相应链接中阅读它们。