JavaScript - 全局变量

JavaScript 全局变量

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

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

JavaScript 全局作用域

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

var x = 10; // Global Scope
let y = 20; // Global Scope	
const z = 30; // Global Scope

这里变量 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

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

打印页面