學習 · 面試考題

箭頭函數和一般函數的差別

By KurauUpdated 2026-05-093 分鐘閱讀

頭函數和普通函數的差別如下：

語法：箭頭函數的語法比較簡潔，可以省去很多不必要的符號，使代码更容易閱讀。普通函數則需要使用 **function** 關鍵字，並且必須定義函數名。
**this** 綁定：箭頭函數的 **this** 是固定的，不受外界的影響，因此它不适用于需要修改 **this** 的场景。普通函數的 **this** 是可以通过 **call**、**apply** 或 **bind** 方法修改的。
參數：箭頭函數的參數與普通函數的參數相同，都可以接受多個參數。
回傳：箭頭函數和普通函數的回傳方式相同，都可以使用 **return** 關鍵字回傳數值。

因此，根據需要使用的功能，您可以選擇使用箭頭函數或普通函數。

使用普通函數的情況：

修改 **this**：如果需要修改函數的 **this**，則應使用普通函數。
在這個程式碼中，在 **showName** 方法中，使用普通函數作為 **setTimeout** 的回調函數，但由於普通函數在這種情況下會改變 **this** 的指向，因此會得到 **undefined**。因此，調用 **myClass.showName()** 會印出：undefined

class MyClass {
  constructor() {
    this.name = "My Class";
  }
 
  showName() {
    setTimeout(function() {
      console.log(this.name);
    }, 1000);
  }
}
 
const myClass = new MyClass();
myClass.showName(); // undefined

javascript

如果您想要在普通函數中引用類實例中的屬性，您可以在構造函數中保存實例，並在普通函數中引用它：

class MyClass {
  constructor() {
    this.name = "My Class";
    this.self = this;
  }
 
  showName() {
    setTimeout(function() {
      console.log(this.self.name);
    }, 1000);
  }
}
 
const myClass = new MyClass();
myClass.showName(); // My Class

javascript

使用 arguments 參數：如果需要使用 arguments 參數，則應使用普通函數。

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}
 
console.log(sum(1, 2, 3, 4, 5));

javascript

使用箭頭函數的情況：

簡化代码：如果需要簡化函數的語法，則應使用箭頭函數。

const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(number => number * number);
console.log(squares);

javascript

保留外部的 **this**：如果需要保留外部的 **this**，則應使用箭頭函數。

 
class MyClass {
  constructor() {
    this.name = "My Class";
  }
 
  showName() {
    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }
}
 
const myClass = new MyClass();
myClass.showName();

javascript