JavaScript – 變數範圍 (Scope)

發布日期：2023/04/14
瀏覽次數：483

JavaScript中的變數的使用範圍是根據它們在程式碼中宣告的位置來決定的，如果在函數內部宣告，則該變數僅在該函數內部可見，通常稱作區域變數；如果變量在全域範圍內宣告，則該變數將可以在程式碼中的所有位置使用，通常稱作全域變數。

如果變數在當前範圍中未定義，則 JavaScript 引擎會向上查找變數，直到找到為止。

以下是一個簡單的範例:

let num1 = 5;

function multiply(num2) {
  let num1 = 10;
  return num1 * num2;
}

let result = multiply(3);
console.log(result); // 輸出 30
console.log(num1);   // 輸出 5

在這個範例中，我們在程式碼的一開始宣告了一個num1變數，並將其設定為5，然後，我們建立了一個multiply函數，並且同樣宣告num1變數，並將其設定為10，而將函數的參數設定為num2，函數的回傳中，回傳num1與num2相乘的結果。

這時候我們在下方呼叫multiply這個函式，並傳入3做為參數，這時候我們得到num1乘上num2的結果會是30，也就是說在multiply這個函式我們會拿到的num1為函數內宣告的num1，而非程式碼開頭的num1。

然而，在下一行我們直接呼叫了num1，這時候是在全域範圍中，因此我們訪問到的是全域變數的num1而非multiply這個函式中的區域變數num1，另外，若是在全域範圍嘗試呼叫num2，則會得到num2沒有宣告的錯誤訊息。

var & let

當使用var宣告變數時，如果在函數內宣告，則該變數的使用範圍是它所在的函數內；如果它在函數外宣告，那使用範圍則是整個全域範圍。這種作用域被稱為”函數作用域”或”全域作用域”。

在ES6（ECMAScript 2015）中，JavaScript引入了let和const關鍵字。當使用let宣告變數時，其作用域僅限於它所在的代碼區塊，這種作用域被稱為”區塊作用域”。

*代碼區塊指的是一段被大括號框起的程式碼區塊。

以下是一個let和var作用域的範例：

function example() {
  var x = 1;
  let y = 2;

  if (true) {
    var x = 3;
    let y = 4;
    console.log(x); // 輸出 3
    console.log(y); // 輸出 4
  }

  console.log(x); // 輸出 3
  console.log(y); // 輸出 2
}

example();


在這個範例中，我們創建了一個名為example的函數。我們使用var宣告一個名為x的變數，並將其設置為1，並使用let宣告一個名為y的變數，並將其設置為2。然後，我們創建了一個if語句，其中我們使用var宣告一個名為x的變數，並將其設置為3。我們使用let宣告一個名為y的變數，並將其設置為4。在if語句的內部，我們輸出x和y的值，它們分別為3和4。然後，在if語句的外部，我們再次輸出x和y的值，此時它們分別為3和2。

這是因為在if語句內部，我們使用var宣告的變數x會將其值改為3，這會影響if語句外部的x的值。但是，由於let宣告的變數y具有區塊作用域，因此在if語句外部，y的值仍然是2，並且不會受到if語句內部y值的影響。

Like

«
返回
»