JS學習筆記#15 | 箭頭函式（Arrow Function）

undefined on Tenor

箭頭函式

箭頭函式是 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 的場景，但不適合需要更多動態特性的函式場景。