JavaScript 函數引用與調用：帶括號與不帶括號的本質區別

核心概念：函數是「第一類公民」

在 JavaScript 中，函數是物件，可以像變量一樣被賦值、傳遞、返回。理解「函數引用」與「函數調用」的區別，是掌握回調函數、事件綁定、定時器等核心機制的關鍵。

兩種寫法的本質差異

1. 不帶括號：傳遞函數引用 (Function Reference)

// 正確：傳遞函數本身給 setTimeout
setTimeout(myFunction, 1000);

// 正確：事件綁定傳遞處理函數引用
element.addEventListener('click', handleClick);

// 正確：陣列方法傳遞回調函數
[1,2,3].forEach(processItem);

語義：「請在未來某個時機調用這個函數」

2. 帶括號：立即調用函數 (Function Invocation)

// 錯誤：立即執行 myFunction()，將其返回值 (undefined) 傳給 setTimeout
setTimeout(myFunction(), 1000);

// 錯誤：立即執行 handleClick()，綁定其返回值
element.addEventListener('click', handleClick());

語義：「現在立刻執行這個函數，並將執行結果傳遞出去」

視覺化對比

進階情境：需要傳參數時怎麼辦？

若回調函數需要參數，不能直接寫 setTimeout(fn(arg), 1000)，需使用匿名函數包裹或bind：

// 方法一：箭頭函數包裹 (推薦)
setTimeout(() => myFunction(param1, param2), 1000);

// 方法二：匿名函數包裹
setTimeout(function() { myFunction(param1, param2); }, 1000);

// 方法三：Function.prototype.bind
setTimeout(myFunction.bind(null, param1, param2), 1000);

常見陷阱案例分析

陷阱 1：迴圈中綁定事件

// ❌ 錯誤：全部綁定到同一個 i (最終值)
for (var i = 0; i < 3; i++) {
    btns[i].onclick = function() { alert(i); }; // 全彈出 3
}

// ✅ 正確：使用 let 區塊作用域
for (let i = 0; i < 3; i++) {
    btns[i].onclick = function() { alert(i); }; // 彈出 0,1,2
}

// ✅ 正確：IIFE 建立閉包 (ES5 寫法)
for (var i = 0; i < 3; i++) {
    (function(index) {
        btns[index].onclick = function() { alert(index); };
    })(i);
}

陷阱 2：物件方法丟失 this

const obj = {
    value: 42,
    getValue: function() { return this.value; }
};

setTimeout(obj.getValue, 100); // ❌ this 指向 window，返回 undefined

// 修正方案
setTimeout(obj.getValue.bind(obj), 100);        // ✅ bind 綁定 this
setTimeout(() => obj.getValue(), 100);          // ✅ 箭頭函數保留外層 this
setTimeout(function() { obj.getValue(); }, 100); // ✅ 匿名函數間接調用

記憶口訣

「要傳函數就別加括號，加了括號是執行結果。」
「回調、綁定、定時器，傳的是『做事的配方』不是『做好的菜』。」

總結

• fn：函數物件本身，可被後續調用
• fn()：立即執行，得到返回值
• 所有接受回調函數的 API (setTimeout, addEventListener, map, then 等) 都需要傳遞函數引用
• 需傳參數時，使用箭頭函數或bind建立新的函數引用

徹底理解這一點，將解決 80% 的 JavaScript 非同步與事件處理 Bug。