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中文网其他相关文章！