JavaScript - 全域變量

歡迎，初露頭角的程序設計師們！今天，我們將深入探索JavaScript全域變量的世界。作為你們親切友善的鄰居電腦老師，我非常高興能夠引導你們了解這個重要的概念。相信我，理解全域變量就像是擁有一個對你們的代碼具有通用遙控功能的遙控器——它非常強大，但你需要明智地使用它！

JavaScript - Global Variables

JavaScript全域變量是什麼？

我們從基礎開始。在JavaScript中，全域變量是一個可以在你們代碼的任何地方訪問的變量。這就像學校裡人見人愛的風雲學生，每個人都認識並且可以和他交流。這些變量是在任何函數之外聲明的，或者是在沒有使用var、let或const關鍵字聲明的。

這裡有一個簡單的例子：

let globalGreeting = "Hello, World!";

function sayHello() {
console.log(globalGreeting);
}

sayHello(); // 輸出：Hello, World!

在這個例子中，globalGreeting是一個全域變量。我們可以從sayHello函數內部和外部訪問它。

JavaScript全域作用域

現在，讓我們來談談作用域。在JavaScript中，"作用域"指的是變量的可見性。全域作用域是JavaScript程序中最外層的作用域。在全域作用域中聲明的變量可以被程序中的任何地方訪問和修改。

這裡有一個例子來說明全域作用域：

let globalVar = "我是全域的！";

function testScope() {
console.log(globalVar); // 在這裡可以訪問globalVar
}

testScope(); // 輸出：我是全域的！
console.log(globalVar); // 在這裡也可以訪問globalVar

正如你所看到的，globalVar可以在函數內部和外部訪問。這就像一個公共通告，每個人都聽得到！

全域變量範例

讓我們探索更多例子，以加深我們對全域變量的理解。

範例1：多個函數訪問同一個全域變量

let counter = 0;

function incrementCounter() {
counter++;
console.log("計數器值：", counter);
}

function resetCounter() {
counter = 0;
console.log("計數器重置為：", counter);
}

incrementCounter(); // 輸出：計數器值： 1
incrementCounter(); // 輸出：計數器值： 2
resetCounter();     // 輸出：計數器重置為： 0
incrementCounter(); // 輸出：計數器值： 1

在這個例子中，incrementCounter和resetCounter兩個函數都可以訪問和修改全域的counter變量。

範例2：瀏覽器中的全域對象

在網頁瀏覽器中，全域作用域由window對象表示。任何全域變量或函數都會成為window對象的屬性。

var globalVar = "我是一個全域變量";
function globalFunction() {
console.log("我是一個全域函數");
}

console.log(window.globalVar);     // 輸出：我是一個全域變量
window.globalFunction();           // 輸出：我是一個全域函數

這就是為什麼你有時會看到window.alert()而不是只有alert()的原因——它們是一回事！

自動全域變量

這裡是JavaScript中一個經常讓初學者感到困惑的複雜部分：如果你賦值給一個未聲明的變量，它會自動成為全域變量。這就像意外地把你的私人文憑公開一樣！

function createGlobal() {
oops = "我不小心變成了全域的！";
}

createGlobal();
console.log(oops); // 輸出：我不小心變成了全域的！

在這個例子中，oops成為了一個全域變量，儘管我們並不打算這樣。這通常被認為是壞習慣，並可能導致難以追踪的bug。總是使用var、let或const來聲明你的變量！

最佳實踐和潛在陷阱

雖然全域變量可能很有用，但它們應該節制使用。這是為什麼：

名稱衝突：如果你有許多全域變量，你可能會不小心重複使用同一名稱，導致意外的行為。
代碼可維護性：全域變量可能會使你的代碼更難以理解和維護，尤其是在大型專案中。
測試困難：依賴於全域變量的函數更難以在隔離環境中進行測試。

相反，考慮使用局部變量，並在需要時將它們作為參數傳遞給函數。

// 而不是這樣：
let name = "Alice";
function greet() {
console.log("Hello, " + name + "!");
}

// 考慮這樣：
function greet(name) {
console.log("Hello, " + name + "!");
}
greet("Alice");

結論

JavaScript中的全域變量就像是你的代碼中的市集——對所有人開放，但最好謹慎使用。它們可以是強大的工具，但記住，能力越強，責任越大！在你們繼續JavaScript的旅程時，你們將會發展出對何時使用全域變量和何時保持局部變量的感覺。

記住，熟能生巧。嘗試創建有自己的例子，並實驗全域變量。不要擔心犯錯誤——這都是學習過程的一部分。祝你好運，未來的JavaScript大師！

方法	描述
`var`	在全域或函數作用域內聲明一個變量，無論作用域為何
`let`	在區塊作用域內聲明一個變量，可選地初始化為某個值
`const`	在區塊作用域內聲明一個只讀命名的常量
`window.variableName`	在瀏覽器環境中顯式聲明一個全域變量
無關鍵字	隱式聲明一個全域變量（不推薦）

Credits: Image by storyset