全域與區域變數

Posted on In

「全域變數、區域變數」的差別在哪呢？

🎃 全域變數：在 all.js 直接宣告變數（變數“沒有”包在 function 裡面）

🍋 全域變數：在 all.js 直接宣告變數（變數“沒有”包在 function 裡面），像是這樣

JS:

1
2
3
4
// 全域變數
var total = 30;

console.log(total);

Console 就會顯示變數total的值 = 30

在 Console 輸入window，就可以看到變數total是「有被記錄起來」的

🎃 區域變數：在 function 裡面宣告變數

🍋 區域變數：在「function 裡面」宣告變數，像是這樣

JS:

1
2
3
4
5
6
7
function count(oneNum,twoNum){
    // 區域變數
    var total = oneNum * twoNum;
    console.log('總數等於：' + total);
}

console.log(total);

‼️ 當 function 內的程式碼執行完後，「function 內的“區域變數”」就會被銷毀（function 執行完後，裡面的內容並不會被記錄起來）

因此，在「function 外面」執行console.log(total);時，「變數total」已經被銷毀了–> Console 就會顯示「total is not defined」

用「區域變數」的好處

🎃 用「區域變數」的好處是：可以釋放「記憶體空間」

🍋 因為「全域變數」都會被記憶體儲存起來，記憶體儲存了太多的「全域變數」，記憶體就會「過於肥大」

「function 內、外」都撈出變數的值

在開發時，有時候會需要在「function 內、外」都撈出變數的值，該怎麼做呢？

作法如下：

🎃 在「function 外面」，先設定一個「全域變數」，只把「變數名稱」寫好，並且給它一個「空值」（也就是：不寫值）

🎃 在「function 裡面」，不需要再寫一次「var」（不需要再設定“區域變數”），只是「給變數一個值」

‼️ 在「function 裡面」，「沒有var」代表「沒有要在 function 裡面新增“區域變數”」，因此，它就會去外層找「全域變數」，並將變數值帶入「全域變數」

JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
// 全域變數
var total;

function count(oneNum,twoNum){
    total = oneNum * twoNum;
    console.log('總數等於：' + total);
}

// 執行 function
count(8, 10);

// 印出「全域變數 total」的值
console.log(total);
  • 執行 function 後，在 Console 就會顯示：
    • 🍋 「總數等於：80」–> 是 function 內的console.log('總數等於：' + total);
    • 🍋 「80」–> 是 function 外的console.log(total);

再寫一次var，會發生什麼事呢？

如果，在 function 內，針對同一個變數total又再寫一次var，就代表「在 function 的世界內，再新增一個“區域變數”」

JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 全域變數
var total;

function count(oneNum,twoNum){
    // 區域變數
    var total = oneNum * twoNum;
    console.log('總數等於：' + total);
}

// 執行 function
count(8, 10);

// 印出「全域變數 total」的值
console.log(total);

執行 function 後，在 Console 就會顯示：
✅ 「總數等於：80」–> 是 function 內的console.log('總數等於：' + total);

❌ 「undefined」–> 因為 function 內的“區域變數”，在 function 執行完後就會被“銷毀”，因此，function 外的console.log(total);就會顯示「undefined」