JavaScript var 關鍵字深度解析：作用域、提升與最佳實踐

核心結論先行

var 宣告的變數具備函數作用域，並發生變數提升；未加 var 的賦值會建立全域變數（掛在 window 上）。ES6+ 建議改用 let/const 避開坑。

三個經典範例解析

// 範例 1：var 區域變數提升
var v1 = 1;
function foo() {
    console.log(v1); // undefined（非 1！）
    var v1 = 2;
}
foo(); // 輸出 undefined

// 範例 2：無 var 全域變數
v2 = 1;
function bar() {
    console.log(v2); // 1
    v2 = 2;
}
bar(); // 輸出 1

// 範例 3：混合使用
v3 = 1;
function baz() {
    console.log(v3); // undefined
    var v3 = 2;
}
baz(); // 輸出 undefined

底層機制圖解

範例 1 等價於

var v1 = 1;
function foo() {
    var v1;           // 提升：宣告移至函數頂端，賦值留原地
    console.log(v1);  // 此時 v1 為 undefined
    v1 = 2;
}

範例 2：隱式全域

v2 = 1 相當於 window.v2 = 1。函數內 v2 = 2 直接修改全域同名變數。

範例 3：區域遮蔽全域

函數內 var v3 提升建立區域變數，遮蔽同名全域 v3，故 console.log 看到區域變數初始值 undefined。

進階：存取被遮蔽的全域變數

var g = 10;
function test() {
    var g = 20;
    console.log(window.g); // 10（瀏覽器環境）
    console.log(this.g);   // 10（非嚴格模式下 this 指向 window）
}

變數命名補充

• 合法字元：字母、數字、底線 _、錢字號 $
• 可數字開頭？不可（var 123 語法錯誤），但 $123、$$$ 合法
• 保留字不可作變數名

現代最佳實踐（ES6+）

鐵律：預設用 const，需重新賦值才改 let，拒絕 var 與隱式全域。配合 ESLint no-var、prefer-const 規則落地執行。