箭頭函式
箭頭函式是 JavaScript ES6（ECMAScript 2015）引入的一種簡化 Function Expression 語法。
它用來快速定義匿名函式，語法簡潔，特性明確，特別適合用於回呼函式等場景。
箭頭函式的語法
1. 基本語法
const 函式名稱 = (參數1, 參數2, ...) => {
// 函式內容
return 結果;
};
2. 簡化寫法
- 當函式只有一行 return 時，可省略大括號 {} 和 return 關鍵字。
const add = (a, b) => a + b;
- 當只有一個參數時，可省略括號 ()。
const square = x => x * x;
- 當沒有參數時，必須使用空括號 ()。
const greet = () => 'Hello, world!';
箭頭函式的特性
1. 不建立自己的 this
- 箭頭函式的 this 是靜態的，繼承自定義它的外部作用域。
- 不會因為呼叫方式而改變。
const obj = {
name: 'Amy',
// 傳統函式
regularFunction: function () {
console.log(this.name); // this 指向 obj
},
// 箭頭函式
arrowFunction: () => {
console.log(this.name); // this 指向外部作用域，可能是全域物件（undefined）
},
greet: function() {
console.log('Hello, my name is ' + this.name);
// 傳統函式
function innerFunction() {
console.log('Inside innerFunction, this.name is:', this.name);
}
innerFunction();
// 箭頭函式
const innerArrowFunction = () => {
console.log('Inside arrowFunction, this.name is:', this.name);
};
innerArrowFunction();
}
};
obj.regularFunction(); //輸出：Amy
obj.arrowFunction(); // 輸出：undefined
obj.greet();
// 輸出："Hello, my name is Amy"
// "Inside innerFunction, this.name is:" "undefined"
// "Inside arrowFunction, this.name is:" "Amy"
2. 沒有 arguments 物件
箭頭函式無法使用 arguments，需要用展開運算符 ...args 替代。const regularFunction = function () {
console.log(arguments); // 可使用 arguments
};
const arrowFunction = (...args) => {
console.log(args); // 使用展開運算符代替 arguments
};
regularFunction(1, 2, 3); // 輸出：[1, 2, 3]
arrowFunction(1, 2, 3); // 輸出：[1, 2, 3]
3. 不能作為建構函式（constructor）
箭頭函式無法使用 new 關鍵字。
const Arrow = () => {};
new Arrow(); // TypeError: Arrow is not a constructor
使用場景與適用性
1. 回呼函式：避免因 this 指向錯誤而出現問題。
setTimeout(() => {
console.log('This is a callback function!');
}, 1000);
2. 陣列方法：簡化邏輯。
const numbers = [1, 2, 3, 4];
const squares = numbers.map(n => n * n);
console.log(squares); // [1, 4, 9, 16]
3. 固定 this 的場合：例如類別中的回呼。
class Timer {
constructor() {
this.seconds = 0;
}
start() {
setInterval(() => {
this.seconds++;
console.log(this.seconds); // this 永遠指向 Timer 實例
}, 1000);
}
}
const timer = new Timer();
timer.start();
結論
- 優點： 語法簡潔，適合短小的函式。 固定 this 指向，避免回呼函式中的常見錯誤。
- 缺點： 無法動態設定 this。 無法使用 arguments。 無法作為建構函式。
箭頭函式適合用於簡化回呼邏輯與處理固定 this 的場景，但不適合需要更多動態特性的函式場景。
