揭秘 JavaScript 箭头函数

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

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

1. 语法

<span style="background-color:#f2f2f2"><span style="color:rgba(0, 0, 0, 0.8)"><span style="color:#292929">const arrowFunctionSyntax = () => { 
console.log(“嗨，我是一个箭头函数”); 
} 
arrowFunctionSyntax();</span></span></span>

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

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

<span style="background-color:#f2f2f2"><span style="color:rgba(0, 0, 0, 0.8)"><span style="color:#292929">const arrowFunctionWithOneParam = number => number + 1; 
const arrowFunctionWithMultipleParams = (numberOne, numberTwo) => { 
let sum = numberOne + numberTwo; 
返还金额；
} 
console.log(arrowFunctionWithOneParam(5)); 
console.log(arrowFunctionWithMultipleParams(5,6))</span></span></span>

        如果我们观察到两个` arrowFunctionWithOneParam `和` arrowFunctionWithMultipleParams `，我们可以在三件事情找到差异-括号` （） `，`块{} `和`的使用返回`关键字。根据箭头函数的语法，如果函数只接受一个参数，可以忽略括号` () `，如果函数只包含一个语句，则可以忽略块` {} `，最后也可以忽略`return`如果函数只包含一个语句。

2. 执行

<span style="background-color:#f2f2f2"><span style="color:rgba(0, 0, 0, 0.8)"><span style="color:#292929">const arrowFunctionExecution = () => { 
console.log(“嗨，我的执行和普通函数类似”); 
} 
arrowFunctionExecution();</span></span></span>

         在执行箭头函数时，它们的执行方式与任何普通函数的执行方式相似。当 JS 引擎执行 ` arrowFunctionExecution() ` 时，它会创建一个函数执行上下文并被推送到调用堆栈。一旦创建了执行上下文，它就会启动创建阶段。在这个阶段，它将创建参数对象并在其本地内存堆中声明所有变量。主要的区别，相比正常功能时，是'的声明本`。箭头函数没有 ` this` 自己的变量；`this` 在箭头函数中使用时会得到词法解析。在创建阶段之后不久，执行阶段开始。这是它执行语句 ` console.log() ` 并打印 ` “嗨，我的执行类似于普通函数” ` 到控制台的阶段。

3. 范围

<span style="background-color:#f2f2f2"><span style="color:rgba(0, 0, 0, 0.8)"><span style="color:#292929">const arrowFunctionScope = () => { 
console.log(“嗨，我的作用域规则类似于函数表达式”) 
}</span></span></span>

        这些函数遵循与任何函数表达式相同的作用域规则。这些函数有自己的作用域，函数内部声明的任何变量都不能在函数外部访问。这些功能也是不适合`电话`，`申请`和`结合'的方法，这通常依赖于建立范围。如果您还没有阅读过 javascript 中的作用域，我建议您阅读这篇。

4. 吊装

<span style="background-color:#f2f2f2"><span style="color:rgba(0, 0, 0, 0.8)"><span style="color:#292929">amIGoingToBeHoisted(); 
var amIGoingToBeHoisted = () => { 
console.log(“答案是否定的”); 
}</span></span></span>

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

七爪网七爪网-专注于分销商城，小程序定制，网站开发，定制开发，成品源码的源码交易平台