揭秘箭头函数

英文地址：https://javascript.plainenglish.io/demystifying-javascript-arrow-functions-7b2a0908a2b3
通过掘金翻译计划活动进行翻译

箭头函数是函数表达式的替代方法，但在语法上有所不同，不能在所有情况下使用。如果您还没有阅读 JavaScript 中的函数表达式，我建议您在继续阅读之前先阅读这篇文章。

现在，让我们试着从语法、执行、作用域和提升以及代码示例方面来理解箭头函数。

1. 语法

const arrowFunctionSyntax = () => {
  console.log('Hi, I am an arrow function');
};
arrowFunctionSyntax();

在上面的代码示例中，我们可以看到箭头函数类似于函数表达式，因为它们被赋值为变量。主要区别在于函数的编写方式。以下是我们可以根据其语法从上述代码中得出的观察结果：

它不包含 function 关键字。
它没有 函数名 ，这意味着这些是匿名函数。
引入了箭头 => 符号。

const arrowFunctionWithOneParam = (number) => number + 1;
const arrowFunctionWithMultipleParams = (numberOne, numberTwo) => {
  let sum = numberOne + numberTwo;
  return sum;
};
console.log(arrowFunctionWithOneParam(5));
console.log(arrowFunctionWithMultipleParams(5, 6));

如果我们同时观察 arrowFunctionWithOneParam 和 arrowFunctionWithMultipleParams，我们可以发现三者的不同—括号 ()、块 {} 和 return 关键字的使用。根据箭头函数的语法，如果函数只接受一个参数，可以忽略括号()。如果函数只包含一条语句，则可以忽略块{}，最后其实也可以忽略return ，如果函数只包含一个语句。

2. 执行

const arrowFunctionExecution = () => {
  console.log('Hi, my execution is similar to normal function');
};
arrowFunctionExecution();

在执行箭头函数时，它们的执行方式与其他普通函数的执行方式相似。当 JS 引擎执行 arrowFunctionExecution() 时，它会创建一个函数，执行上下文并被推送到调用堆栈。一旦创建了执行上下文，它就会启动创建阶段。在这个阶段，它将创建参数对象并在其本地内存堆中声明所有变量。

与普通函数相比，主要区别在于 this 的声明。箭头函数没有自己的 this 变量； this 在箭头函数中使用时会得到词法解析。在创建阶段之后不久，执行阶段开始。这时它开始执行语句 console.log() ，并将 "Hi, my execution is similar to normal function" 打印到控制台。

3. 作用域

const arrowFunctionScope = () => {
  console.log('Hi, my scoping rules works similar to function expression');
};

这些函数遵循与其他函数表达式相同的作用域规则。这些函数有自己的作用域，函数内部声明的任何变量都不能在函数外部访问。这些函数也不适用于 call、apply 和 bind 方法，这些方法通常依赖于作用域。如果您还没有阅读过 JavaScript 中的作用域，我建议您阅读 这篇文章。

4. 提升

amIGoingToBeHoisted();
var amIGoingToBeHoisted = () => {
  console.log('The answer is NO');
};

箭头函数没有被提升，因为它们也是函数表达式，其中函数被分配为变量的值。当 JavaScript 引擎执行上述代码时，在创建阶段，声明语句 var amIGoingToBeHoisted 将被移到顶部并使用值 undefined 进行初始化，而将初始值留在后面。在执行阶段，遇到语句amIGoingToBeHoisted 时会抛出类型错误，因为它的值是 undefined，这不是提升后的函数类型。要了解有关 JavaScript 提升的更多信息，我建议您阅读文章。