JavaScript 101：箭头函数

箭头函数——它们是常规函数的更简洁版本，自 ES6 首次引入以来就越来越受欢迎。它不仅语法更简洁，而且还提供隐式返回，我们将深入探讨这一点。

等等！如果你还没看过本系列的第一部分《JavaScript 101：函数分解》，一定要去看看。

让我们首先了解箭头函数的语法与常规函数的不同之处。

这里我们有一个常规函数：

function helloWorld(name) {
 console.log('Hello ' + name);
}

如果我们想使用箭头函数，它看起来会像这样：

const helloWorld = name => {
  console.log('Hello ' + name);
}

箭头函数有一些关键区别。我们不再需要使用关键字来声明函数function。我们的参数也与以前略有不同。它们现在位于等号之后、粗箭头 ( =>) 之前。

你可能还注意到，我们现在将箭头函数声明为一个变量。这是因为箭头函数是匿名函数，或者说声明时没有名称的函数。你不必将它们赋值给变量，但这样做可以在出现错误时更容易地追踪它们。

🌟快速提示：如果只有一个参数，括号是可选的。如果没有任何参数，则需要使用空括号。

下面是具有多个参数的示例：

const helloWorld = (name, emoji) => {
  console.log(emoji + ' Hello ' + name);
}

我们的示例没有参数：

const helloWorld = () => {
  console.log('Hello');
}

既然我们已经了解了箭头函数的语法，现在来谈谈它的另一个巨大好处——隐式返回！这会让你的代码比以前更简洁。让我们以之前使用的示例为例，将 console.log 语句替换为 return 语句。

const helloWorld = name => {
  return 'Hello ' + name;
}

因为我们只返回一行代码，所以我们可以使用箭头函数的功能来执行隐式返回并重写我们的函数，如下所示：

const helloWorld = name => 'Hello ' + name;

使用隐式返回时，你可以省略return关键字和花括号。这样就能写出非常漂亮的单行函数了。

隐式返回并不是箭头函数和常规函数之间唯一的重大区别。另一个重要区别在于它们如何处理this关键字。

在常规函数中，this关键字的绑定取决于调用它的上下文。然而，在箭头函数中，this关键字是词法绑定的，也就是说，它是静态的，并且由它所在的作用域决定。

我自己仍在努力理解这一点，但如果你想深入了解的话，JavaScript Kit有一个很好的解释。

请务必在Twitter上关注我，我会发布大量有关科技的帖子，说实话，还会发布大量有关狗的帖子。