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 - Block scope </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      if (true) {
         let a = 10;
         document.getElementById("output").innerHTML = "a = " + a;
      }
      // a can't be accessed here
   </script>
</body>
</html>

输出

a = 10

示例

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

<html>
<head>
   <title> JavaScript - Block scope </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 - Function scope </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 -> Inside the block = " + x + "<br>";
            output.innerHTML += "y -> Inside the block = " + y + "<br>";
            output.innerHTML += "z -> Inside the block = " + z + "<br>";
         }
         output.innerHTML += "x -> Outside the block = " + x + "<br>";
         // y 和 z 无法在这里访问
      }

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

输出

x -> Inside the block = 30
y -> Inside the block = 20
z -> Inside the block = 10
x -> Outside the block = 30

JavaScript 局部作用域

JavaScript 局部作用域是函数作用域和块作用域的组合。JavaScript 编译器在函数调用时创建一个局部变量，并在函数调用完成时删除该变量。

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

示例

在下面的代码中，我们使用 var、let 和 const 关键字定义了函数内部的变量。所有变量都是函数的局部变量。函数外部无法访问它们。

类似地，我们可以在局部作用域中定义循环变量。

<html>
<head>
   <title> JavaScript - Local scope </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

我们注意到，当变量在函数内部定义时，该变量将成为该函数的局部变量。在这种情况下，该变量具有函数作用域。当变量在特定块内定义时，它将成为该块的局部变量，并具有块作用域。