JavaScript - 全局变量

JavaScript 全局变量

JavaScript 中的全局变量是在函数或任何特定块之外定义的变量。它们可以在 JavaScript 代码中的任何位置访问。所有脚本和函数都可以访问全局变量。

您可以使用 var、let 或 const 关键字定义全局变量。未使用 var、let 或 const 关键字定义的变量将自动成为全局变量。

JavaScript 全局作用域

全局变量具有全局作用域。因此，在函数或块之外声明的变量具有全局作用域。全局作用域在所有其他作用域中可见或可访问。在客户端 JavaScript 中，全局作用域是指执行所有代码的网页。使用 var 关键字声明的全局变量属于 window 对象。

var x = 10; // 全局作用域
let y = 20; // 全局作用域
const z = 30; // 全局作用域

这里的变量 x、y 和 z 在任何函数和块之外声明，因此它们具有全局作用域，被称为全局变量。

全局变量示例

让我们通过下面的示例了解更多关于全局变量的知识。

示例

我们在下面的代码中定义了 x、y 和 z 全局变量。您可以观察到，变量可以在代码中的任何位置访问。

<html>
<head>
   <title> JavaScript - Global variables </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      var x = 10;
      let y = 20;
      const z = 30;
      document.getElementById("output").innerHTML = 
	  "x = " + x + "<br>" +
	  "y = " + y + "<br>" +
      "z = " + z;
   </script>
</body>
</html>

输出

x = 10
y = 20
z = 30

示例

在下面的示例中，我们使用 var 和 let 关键字定义了变量 a 和 b。您可以看到，由于 a 和 b 变量是全局变量，因此它们可以在函数内部或函数外部访问。

<html>
<head>
   <title> JavaScript - Global variables </title>
</head>
<body>
   <p id = "demo"> </p>
   <script>
      const output = document.getElementById("demo");
      var a = 10;
      let b = 20;
      function test() {
         output.innerHTML += "a -> Inside the function = " + a + "<br>";
         output.innerHTML += "b -> Inside the function = " + b + "<br>";
      }
      test();
      output.innerHTML += "a -> Outside the function = " + a + "<br>";
      output.innerHTML += "b -> Outside the function = " + b + "<br>";
   </script>
</body>
</html>

输出

a -> Inside the function = 10
b -> Inside the function = 20
a -> Outside the function = 10
b -> Outside the function = 20

自动全局变量

当您在代码中的任何位置定义变量时，如果未使用 var、let 或 const 关键字，则该变量将自动变为全局变量，并且可以在代码中的任何位置访问。

示例

在下面的代码中，我们在函数内定义了变量"a"，而没有使用任何关键字。即使我们在函数内定义了该变量，由于我们没有使用任何关键字来定义该函数，它也会变为全局变量。

输出显示变量"a"可以在函数内部或外部访问。

<html>
<head>
   <title> JavaScript - Global variables </title>
</head>
<body>
   <p id = "demo"> </p>
   <script>
      const output = document.getElementById("demo");
      function test() {
      a = 90;
            output.innerHTML += "a -> Inside the function = " + a + "<br>";
        }
        test();
        output.innerHTML += "a -> Outside the function = " + a + "<br>";
    </script>
</body>
</html>

输出

a -> Inside the function = 90
a -> Outside the function = 90

在函数或特定块内定义全局变量不是一个好的做法，因为代码中可能会发生命名冲突。