JavaScript 中的箭頭函數與常規函數。使用哪一個？

JavaScript 為我們提供了兩種定義函數的主要方式：箭頭函數和常規函數。儘管乍一看它們可能很相似，但存在一些關鍵差異，這些差異可能會影響程式碼的運作方式及其結構方式。讓我們分解這些差異，以便您可以更好地理解何時使用每種類型。

文法差異

箭頭函數更短且使用 =>象徵。與常規函數相比，它們的外觀如下：

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

// Arrow function
const add = (a, b) => a + b;

使用箭頭函數，如果傳回單一表達式，則可以跳過 return 關鍵字。這使得箭頭函數在更短、更簡單的函數中很受歡迎。

這個綁定

在常規函數中，this 指的是呼叫該函數的物件。然而，箭頭函數沒有自己的 this 上下文。相反，它們從定義它們的周圍程式碼繼承這一點。

以下範例顯示了這種差異如何影響行為：

const object = {
  name: 'JavaScript',
  regularFunction: function() {
    console.log(this.name); // 'JavaScript'
  },
  arrowFunction: () => {
    console.log(this.name); // undefined
  }
};

obj.regularFunction(); // 'JavaScript'
obj.arrowFunction();   // undefined

當您將函數傳遞給事件偵聽器時，這可能很有用，請看一下：

document.querySelector('button').addEventListener('click', function() {
  console.log(this); // refers to the button element!
});

參數對象

常規函數可以存取參數對象，該對象保存傳遞給函數的所有參數。箭頭函數沒有這個；他們使用剩餘參數 ...args 代替。

// regular function with arguments
function sum() {
  return Array.from(arguments).reduce((a, b) => a + b);
}

// arrow function with rest parameters
const sum = (...args) => args.reduce((a, b) => a + b);

回呼中的使用

箭頭函數可以簡化你的程式碼，特別是在處理需要回呼的事情時 - 例如 Promise 或陣列方法，如 .map() 和 .filter()。

// using arrow functions in array methods
const numbers = [1, 2, 3];
const squares = numbers.map(number => number * n); // [1, 4, 9]

何時使用箭頭函數與常規函數

一般來說，箭頭函數適用於：

• 簡短、簡潔的函數，例如陣列方法或回呼
• 應該保持一致的情況，例如在類別方法或閉包中

常規函數在下列情況下很有用：

• 您需要一個特定的 this 綁定，例如在物件方法或事件偵聽器中
• 您想要使用參數物件而不定義其餘參數

讓我們注意到這裡有一些有趣的事情。正如您所看到的，差異非常微妙。在大多數情況下，您選擇哪一個並不重要，除非您的程式碼庫大量使用此參數或參數（不太可能）。

底線是選擇你喜歡的，只要在你的項目中保持一致。

你同意這種做法嗎？

以上是JavaScript 中的箭頭函數與常規函數。使用哪一個？的詳細內容。更多資訊請關注PHP中文網其他相關文章！