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

我們注意到，當變數在函式內部定義時，該變數就成為函式的區域性變數。在這種情況下，變數具有函式作用域。當變數在特定塊內部定義時，它就成為該塊的區域性變數，並具有塊作用域。

列印頁面