JavaScript 作用域

JavaScript 变量作用域

JavaScript 中的变量作用域决定了变量在整个代码中的可访问性和可见性。作用域是代码执行的当前上下文。这意味着变量的作用域是由它被执行的位置决定的，而不是声明的位置。

在 JavaScript 中，对象和函数也是变量。因此，JavaScript 变量作用域也决定了对象和函数在程序中的可访问性或可见性。

学习 JavaScript 中的变量作用域对于编写清晰的代码和避免命名冲突是非常重要的。

JavaScript 中有以下几种类型的变量作用域：

块作用域
函数作用域
局部作用域
全局作用域

在这里，我们将覆盖块作用域、函数作用域和局部作用域。我们将在专门讨论 JavaScript 全局变量的一章中详细讨论全局作用域。

JavaScript 块作用域

在 JavaScript ES6 之前，只有全局作用域和函数作用域。ES6 引入了 let 和 const 关键字。这些关键字在 JavaScript 中提供了块作用域。

使用 let 和 const 关键字在 {} 块内定义的 JavaScript 变量只能在其定义的块内访问。

{
   let x = 10; // x 在这里可以访问
}
// x 在这里不能访问

使用 var 关键字定义的变量则不会提供块作用域。

{
   var x = 10; // x 在这里可以访问
}
// x 在这里也可以访问

示例

在以下示例中，我们在 if 块内定义了变量 a。在输出中，你可以看到变量 a 只能在 if 块内访问。如果你试图在 if 块之外访问变量 a，它会抛出一个引用错误，类似于 “变量 a 未定义”。

<html>
<head>
   <title> JavaScript - 块作用域 </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      if (true) {
         let a = 10;
         document.getElementById("output").innerHTML = "a = " + a;
      }
      // a 在这里不能访问
   </script>
</body>
</html>

输出

a = 10

示例

在下面的代码中，我们定义了 test() 函数。在函数中，我们使用大括号 {} 添加了一个块，并在 {} 块内定义了变量 x。变量 x 在 {} 块之外无法访问，因为它具有块作用域。

<html>
<head>
   <title> JavaScript - 块作用域 </title>
</head>
<body>
   <p id = "demo"> </p>
   <script>
      const output = document.getElementById("demo");
      function test() {
         {
            let x = 30;
            output.innerHTML = "x = " + x;
         }
         // 变量 x 在这里不能访问
      }
      test();
   </script>
</body>
</html>

输出

x = 30

每当你在像循环块、if-else 块等块内使用 let 或 const 关键字定义变量时，该变量无法在块外访问。

JavaScript 函数作用域

在 JavaScript 中，每个函数都会创建一个作用域。在函数内部定义的变量具有函数作用域。在函数内定义的变量只能在该函数内部访问。这些变量在函数外部无法访问。

每当你在函数内部使用 var 关键字定义变量时，该变量在整个函数内部都可以访问，即使它是定义在一个特定的块内。

例如，

function func() {
   {
      var x; // 函数作用域
      let y; // 块作用域
      const z = 20; // 块作用域
   }
   // x 在这里可以访问，但 y 和 z 不能
}

示例

在以下示例中，我们分别使用 var, let, const 关键字定义了变量 x, y, z。变量 x 在函数的任何地方都可以访问，因为它具有函数作用域；但是 y 和 z 只能在其定义的块内访问。

<html>
<head>
   <title> JavaScript - 函数作用域 </title>
</head>
<body>
   <p id = "demo"> </p>
   <script>
      const output = document.getElementById("demo");
      function func() {
         {
            var x = 30;
            let y = 20;
            const z = 10;
            output.innerHTML += "x -> 在块内 = " + x + "<br>";
            output.innerHTML += "y -> 在块内 = " + y + "<br>";
            output.innerHTML += "z -> 在块内 = " + z + "<br>";
         }
         output.innerHTML += "x -> 在块外 = " + x + "<br>";
         // y 和 z 在这里不能访问
      }

      func();
   </script>
</body>
</html>

输出

x -> 在块内 = 30
y -> 在块内 = 20
z -> 在块内 = 10
x -> 在块外 = 30

JavaScript 局部作用域

JavaScript 局部作用域是函数作用域和块作用域的结合。当函数被调用时，JavaScript 编译器会创建局部变量，并在函数调用完成后删除这些变量。

简而言之，在函数或块内定义的变量对该特定作用域是局部的。函数的参数被视为函数内部的局部变量。

示例

在下面的代码中，我们在函数内使用 var, let, const 关键字定义了变量。所有这些变量都对函数是局部的。它们不能在函数外部访问。

同样地，我们可以在局部作用域内定义循环变量。

<html>
<head>
   <title> JavaScript - 局部作用域 </title>
</head>
<body>
   <p id = "demo"> </p>
   <script>
      const output = document.getElementById("demo");
      function func() {
         let first = 34;
         var second = 45;
         const third = 60;

         output.innerHTML += "First -> " + first + "<br>";
         output.innerHTML += "Second -> " + second + "<br>";
         output.innerHTML += "Third -> " + third + "<br>";
      }
      func();
   </script>
</body>
</html>

输出

First -> 34
Second -> 45
Third -> 60

我们注意到，当变量在函数内部定义时，变量对函数来说是局部的。在这种情况下，变量具有函数作用域。当变量在特定的块内定义时，它对那个块是局部的，并具有块作用域。