JavaScript 的箭頭函數 (Arrow Function) 是 ES6 (ECMAScript 2015) 引入的一種重要的函數語法特性，它用更簡潔的方式定義函數，并改變了 this 的綁定行為。
箭頭函數和傳統函數的主要區別：
| 特性 | 箭頭函數 | 傳統函數 |
|---|---|---|
| 語法 | 更簡潔，省略 function 關鍵字 | 使用 function 關鍵字 |
| this 綁定 | 繼承自外層詞法作用域（靜態） | 取決于調用方式（動態） |
| 構造函數 | 不能使用 new | 可以使用 new |
| arguments | 沒有自己的 arguments 對象 | 有自己的 arguments 對象 |
| 原型 | 沒有 prototype 屬性 | 有 prototype 屬性 |
| 簡寫返回 | 單行表達式可隱式返回 | 必須顯式使用 return |
🖋? 基本語法
箭頭函數的基本形式是 (參數) => { 函數體 }。根據參數和函數體的不同，有多種簡寫形式：
-
無參數：括號不能省。
const sayHello = () => { console.log("Hello!"); }; -
單個參數：可省略參數括號。
const square = x => { return x * x; }; -
多個參數：需要用括號括起來。
const add = (a, b) => { return a + b; }; -
單行表達式：可省略
{}和return關鍵字（隱式返回）。const multiply = (a, b) => a * b; // 隱式返回 a * b 的結果 -
返回對象字面量：為了區分代碼塊，需要用括號包裹對象。
const createUser = (name, age) => ({ name: name, age: age });
🔍 理解 this 的行為
箭頭函數最顯著的特征是 它沒有自己的 this，其 this 值繼承自定義它時的外部詞法作用域（即外層函數或全局作用域），并且一旦定義，this 指向就固定了，無法通過 call, apply, bind 等方法改變。
看一個例子理解傳統函數和箭頭函數中 this 的不同：
function Counter() {this.count = 0;// 傳統函數：this 指向取決于調用方式，setTimeout 中調用時 this 可能指向全局對象（如 window）setInterval(function() {this.count++; // 這里的 this 可能不是 Counter 實例console.log('Traditional:', this.count); // 可能輸出 NaN 或 undefined}, 1000);// 箭頭函數：繼承 Counter 函數作用域的 this，即 Counter 實例setInterval(() => {this.count++; // this 正確指向 Counter 實例console.log('Arrow:', this.count); // 正常遞增輸出}, 1000);
}const myCounter = new Counter();
再看一個對象字面量中的常見“陷阱”：
const obj = {value: 42,// 傳統函數作為方法：this 通常指向調用它的對象 objtraditionalMethod: function() {console.log(this.value); // 輸出 42},// 箭頭函數作為方法：this 繼承自外部作用域（假設是全局），而非 objarrowMethod: () => {console.log(this.value); // 可能輸出 undefined（全局無 value）}
};obj.traditionalMethod(); // 42
obj.arrowMethod(); // undefined (在瀏覽器中，外層可能是 window)
?? 箭頭函數的限制
因其特性，箭頭函數在以下場景不適用：
-
不能作為構造函數：嘗試用
new調用箭頭函數會拋出錯誤。const Foo = () => {}; const bar = new Foo(); // TypeError: Foo is not a constructor -
沒有
prototype屬性：因此不能用于定義構造函數原型上的方法。const Arrow = () => {}; console.log(Arrow.prototype); // undefined -
沒有自己的
arguments對象：在箭頭函數內訪問arguments會引用外部函數的arguments。如需訪問參數，可使用剩余參數（Rest Parameters）。const showArgs = (...args) => {console.log(args); // 使用剩余參數 args 是一個數組 }; showArgs(1, 2, 3); // [1, 2, 3] -
不能用作生成器（Generator）：無法在箭頭函數中使用
yield關鍵字。
🎯 適用場景與最佳實踐
優先使用箭頭函數的場景：
-
回調函數：特別是在數組方法（如
map,filter,reduce,forEach）、setTimeout、setInterval或事件監聽器（若無需通過this訪問事件目標）中，可避免bind或var self = this的寫法。// 數組方法 const numbers = [1, 2, 3]; const doubled = numbers.map(num => num * 2); // [2, 4, 6]// setTimeout setTimeout(() => {console.log('This runs after 1 second.'); }, 1000); -
需要固定
this的場景：當你明確希望函數使用定義時的this，而不是調用時的this。 -
函數式編程：編寫短小的純函數或高階函數時，語法更簡潔。
避免或謹慎使用箭頭函數的場景：
- 對象方法：若方法需要通過
this訪問對象自身的其他屬性，應使用傳統函數。 - 事件處理函數：若需要通過
this訪問觸發事件的 DOM 元素，應使用傳統函數（除非使用事件對象或其他方式）。 - 原型方法：定義在原型上的方法通常需要動態
this，應使用傳統函數。 - 構造函數：箭頭函數不能作為構造函數。
💡 更多技巧
-
默認參數：和傳統函數一樣，箭頭函數支持默認參數。
const greet = (name = 'Guest') => {console.log(`Hello, ${name}!`); }; greet(); // Hello, Guest! -
剩余參數（Rest Parameters）：用于獲取不確定數量的參數。
const sumAll = (...numbers) => {return numbers.reduce((acc, num) => acc + num, 0); }; console.log(sumAll(1, 2, 3)); // 6 -
參數解構：可以在參數中直接解構對象或數組。
const userInfo = ({name, age}) => {console.log(`${name} is ${age} years old.`); }; userInfo({name: 'Alice', age: 30}); // Alice is 30 years old.
📊 總結：如何選擇
| 場景舉例 | 推薦使用 | 原因 |
|---|---|---|
數組方法回調 (map, filter) | 箭頭函數 | 語法簡潔，this 行為通常符合預期 |
setTimeout / setInterval | 箭頭函數 | 避免 this 指向問題，無需額外綁定 |
| 對象方法 | 傳統函數 | 需要動態 this 指向調用它的對象 |
事件處理函數 (需要 event.target) | 傳統函數 | 需要動態 this 指向綁定事件的元素 (或使用事件對象的 currentTarget) |
| 構造函數 | 傳統函數 | 箭頭函數不能用作構造函數 |
| 原型方法 | 傳統函數 | 需要動態 this 指向實例 |
需要 arguments 對象 | 傳統函數 | 箭頭函數沒有自己的 arguments |
選擇箭頭函數還是傳統函數，關鍵在于判斷是否需要函數有自己的 this 上下文，以及代碼的簡潔性和可讀性。
)
