JavaScript - 变量作用域

JavaScript 变量作用域

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

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

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

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

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

这里，我们将介绍块级、函数和局部作用域。我们将在 JavaScript 全局变量章节中详细讨论全局作用域。

JavaScript 块级作用域

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

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

{
   let x = 10; // x is accessible here
}
//x is not accessible here

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

{
   var x = 10; // x is accessible here
}
//x is accessible here also

示例

在下面的示例中，我们在 '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;
         }
         // variable x is not accessible here
      }
      test();
   </script>
</body>
</html>

输出

x = 30

无论何时您在块内使用 'let' 或 'const' 关键字定义变量，例如循环块、if-else 块等，都无法在块外部访问它。

JavaScript 函数作用域

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

无论何时您在函数内部使用 'var' 关键字定义变量，该变量都可以在整个函数中访问，即使它是在特定块内定义的。

例如，

function func() {
   {
      var x; // function scope
      let y; // Block scope
      const z = 20; // Block scope
   }
   // x is accessible here, but not 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 and z can't be accessible here
      }

      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

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

打印页面