英文地址：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 提升的更多信息，我建议您阅读 文章。