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

揭秘箭头函数

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

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

1. 语法

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

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

  1. 它不包含 function 关键字。
  2. 它没有 函数名 ,这意味着这些是匿名函数。
  3. 引入了箭头 => 符号。
const arrowFunctionWithOneParam = (number) => number + 1;
const arrowFunctionWithMultipleParams = (numberOne, numberTwo) => {
  let sum = numberOne + numberTwo;
  return sum;
};
console.log(arrowFunctionWithOneParam(5));
console.log(arrowFunctionWithMultipleParams(5, 6));

如果我们同时观察 arrowFunctionWithOneParamarrowFunctionWithMultipleParams,我们可以发现三者的不同---括号 ()、块 {}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');
};

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

4. 提升

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

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