1、引言

JavaScript 自 ES6 引入了箭頭函數（Arrow Function）后，因其簡潔的語法和對 this 的詞法綁定機制，迅速成為開發者喜愛的寫法之一。然而，并不是所有場景都適合使用箭頭函數。

在實際開發中，我們常常會因為追求代碼簡潔而忽視其潛在問題，例如：

• this 指向錯誤
• 不適合作為構造函數
• 在對象方法或原型鏈中造成上下文混亂

本文將帶你系統性地了解箭頭函數的行為差異，識別常見的誤用場景，并提供具體的重構策略與實戰案例，幫助你在項目中寫出更安全、可維護的函數邏輯。

2、箭頭函數的基本行為回顧

2.1 語法對比：傳統函數 vs 箭頭函數

類型	示例
傳統函數	function add(a, b) { return a + b; }
匿名函數表達式	const add = function(a, b) { return a + b; };
箭頭函數	const add = (a, b) => a + b;

2.2 this 的綁定機制差異

這是箭頭函數最顯著的特點之一：

const obj = {name: "Alice",greet: () => {console.log("Hello, " + this.name); // undefined}
};obj.greet(); // 輸出: Hello, undefined

箭頭函數不會創建自己的 this 上下文，它繼承自外層作用域。這在某些場景非常有用，但在對象方法中卻可能導致錯誤。

2.3 arguments、super 和 new.target 的支持情況

箭頭函數不能使用 arguments 對象，也不能作為構造函數調用（會拋出錯誤），也不能使用 super() 或 new.target。

const foo = () => {console.log(arguments); // 報錯: arguments is not defined
};

2.4 適用場景與非適用場景總結

場景	是否推薦使用箭頭函數	原因
回調函數（如數組 map、filter）	? 推薦	保持 this 一致性
對象方法	? 不推薦	this 指向錯誤
構造函數	? 不推薦	無法使用 new
原型方法	? 不推薦	this 上下文丟失
事件監聽器	?? 謹慎使用	可能影響調試和綁定

---

3、常見的箭頭函數誤用場景

3.1 在對象方法中使用箭頭函數導致 this 指向錯誤

const user = {name: "Bob",sayHi: () => {console.log(`Hi, ${this.name}`); // undefined}
};user.sayHi(); // Hi, undefined

? 正確做法：使用傳統函數表達式

const user = {name: "Bob",sayHi: function() {console.log(`Hi, ${this.name}`); // Hi, Bob}
};

3.2 作為構造函數使用（會拋出錯誤）

const Person = (name) => {this.name = name;
};const p = new Person("Alice"