箭頭函數（Arrow Functions）和普通函數（傳統函數）在 JavaScript 中有顯著的區別，主要體現在語法、this?的綁定、構造函數行為、參數處理等方面。以下是詳細對比：

1. 語法差異

• 普通函數：

  function add(a, b) { return a + b; }

  或函數表達式：

  const add = function(a, b) { return a + b; };

• 箭頭函數（更簡潔）：

  const add = (a, b) => a + b; // 省略 return 和大括號（單行返回）

  或：

  const add = (a, b) => { return a + b; };

2.?this?的綁定

• 普通函數：
  • this?是動態綁定的，取決于函數的調用方式。
  • 例如：

    function sayHello() { console.log(`Hello, ${this.name}`); } const person = { name: "Alice" }; sayHello.call(person); // 輸出 "Hello, Alice"（通過 call 顯式綁定）

• 箭頭函數：
  • 沒有自己的?this，繼承自外層作用域（詞法作用域）。
  • 例如：

    const person = { name: "Alice", sayHello: function() { setTimeout(() => { console.log(`Hello, ${this.name}`); // 這里的 this 繼承自 sayHello 的 this }, 100); }, }; person.sayHello(); // 輸出 "Hello, Alice"

  • 如果用普通函數，this?會丟失：

    const person = { name: "Alice", sayHello: function() { setTimeout(function() { console.log(`Hello, ${this.name}`); // 這里的 this 是 window/undefined（嚴格模式） }, 100); }, }; person.sayHello(); // 輸出 "Hello, undefined" 或報錯

3. 構造函數

• 普通函數：
  • 可以作為構造函數，用?new?調用：

    function Person(name) { this.name = name; } const alice = new Person("Alice");

• 箭頭函數：
  • 不能作為構造函數，用?new?調用會報錯：

    const Person = (name) => { this.name = name; // 報錯：箭頭函數不能用作構造函數 }; const alice = new Person("Alice"); // TypeError: Person is not a constructor

4.?arguments?對象

• 普通函數：
  • 有?arguments?對象，包含所有傳入參數：

    function sum() { console.log(arguments); // 類似數組的對象 } sum(1, 2, 3); // 輸出 [1, 2, 3]

• 箭頭函數：
  • 沒有?arguments?對象，但可以通過剩余參數（...args）模擬：

    const sum = (...args) => { console.log(args); // [1, 2, 3] }; sum(1, 2, 3);

5.?prototype?屬性

• 普通函數：
  • 有?prototype?屬性，可用于添加方法：

    function Person() {} Person.prototype.sayHello = function() { console.log("Hello"); };

• 箭頭函數：
  • 沒有?prototype?屬性：

    const Person = () => {}; console.log(Person.prototype); // undefined

6. 適用場景

• 普通函數：
  • 需要動態?this?的場景（如對象方法、事件回調）。
  • 需要作為構造函數。
  • 需要?arguments?對象。
• 箭頭函數：
  • 簡化回調函數（如?map、filter、setTimeout）。
  • 需要固定?this?的場景（如 Vue/React 中的方法）。
  • 代碼更簡潔。

總結表

特性	普通函數	箭頭函數
語法	function() {}	() => {}
this?綁定	動態綁定（取決于調用方式）	繼承自外層作用域（詞法作用域）
構造函數	可以（new?調用）	不可以（報錯）
arguments	有	沒有（可用?...args?替代）
prototype	有	沒有
適用場景	動態?this、構造函數	簡化回調、固定?this

選擇建議

• 如果需要動態?this?或構造函數，用普通函數。
• 如果需要簡潔語法或固定?this，用箭頭函數。
• 在 Vue/React 中，方法通常用箭頭函數或綁定?this，避免?this?丟失問題。