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

在函式或特定程式碼塊內部定義全域性變數不是一個好習慣，因為程式碼中可能會發生命名衝突。

列印頁面