JavaScript setInterval/clearInterval 變量作用域解析：為何未聲明 var 也能跨函數訪問？

問題代碼

var a = 0;
function move() {
    a = a + 30;
    document.getElementById('we').style.left = a + 'px';
}
function showA() {
    timer = window.setInterval('move()', 200); // 未用 var 聲明
}
function showB() {
    window.clearInterval(timer); // 為何能訪問 showA 的 timer？
}

核心答案：隱式全域變量

在 JavaScript 中，未使用 var、let、const 聲明的變量會自動成為全域變量（掛載在 window 物件上）。

• showA() 中的 timer = ... 實際上創建了 window.timer
• showB() 訪問 timer 時，沿作用域鏈向上查找，找到 window.timer
• 因此 clearInterval(timer) 能正常工作

對比：正確使用區域變量

function showA() {
    var timer = window.setInterval(move, 200); // 加上 var，變為區域變量
}
function showB() {
    // window.clearInterval(timer); // ❌ 報錯：timer is not defined
}

此時 timer 僅在 showA 函數作用域內有效，showB 無法訪問。

最佳實踐建議

1. 永遠使用 let/const 聲明變量（ES6+ 環境），避免隱式全域污染
2. 使用函數引用而非字串：setInterval(move, 200) 而非 setInterval('move()', 200)
3. 將定時器 ID 存儲在模組級變量或類屬性中，而非依賴全域變量
4. 嚴格模式 ('use strict') 下隱式全域會直接拋出 ReferenceError

改良版代碼

'use strict';
let timerId = null; // 模組級變量，明確作用域
const box = document.getElementById('we');
let position = 0;

function move() {
    position += 30;
    box.style.left = position + 'px';
}

function startAnimation() {
    if (timerId) return; // 防止重複啟動
    timerId = setInterval(move, 200);
}

function stopAnimation() {
    clearInterval(timerId);
    timerId = null;
}

理解作用域鏈與聲明提升是 JavaScript 進階的基石，請務必養成顯式聲明變量的習慣。