JavaScript 箭头函数和普通函数之间的区别

可重用的代码可以帮助开发人员创建应用程序。重用代码并不意味着在没有 JavaScript 函数的情况下使用它。代码段在运行时由函数执行。普通函数和箭头函数是 JS 的两种主要用法。

在本文中，我们将讨论普通函数和箭头函数之间的区别及其实际应用。

什么是函数？

函数是 JavaScript 的基本组成部分之一。在 JavaScript 中，函数是执行操作或计算值的语句集合，类似于过程。即使如此，一个过程需要接收一些输入，产生一些输出，并显示输入和输出以某种方式相关联才能被视为函数。为了在希望调用它的作用域中使用函数，必须在某处定义它。JavaScript 函数有两种形式：

1. 普通函数
2. 箭头函数 (ES6 引入)

JavaScript 普通函数

使用“function”关键字和关联的函数名来创建一个常规函数。接下来，我们设计一个空间，用户输入可以调节结果。此外，输出将遵循括号内的指令。

编写常规函数有两种方式：函数声明和函数表达式。

函数声明和函数表达式之间的主要区别在于，在声明函数 add(2,3) 之前调用它，而在定义函数 sum(2,3) 之后调用它。

语法

以下演示语法或示例代表 JavaScript 中的普通函数。我们可以使用函数及其值进行加法运算。

我们可以调用函数并显示输出。

 
Let variable_name = function_name(2, 5);
Console.log(variable_name);

示例

以下示例显示了带有 alert 和 console 标签的常规函数。我们可以使用按钮将普通函数添加到 onclick 事件中。

输出

JavaScript 箭头函数

箭头函数的另一个名称是“胖箭头函数”。能够以更简洁的语法编写函数表达式是 ES6 中的一项新功能。箭头函数使用“胖箭头”语法 (=>)。与传统函数相比，它使函数创建更容易。在这里，没有声明技术；相反，我们只能使用函数表达式来编写。

它是普通 JavaScript 函数的替代方法。箭头函数有一些限制，如下所述。

• 箭头函数不能用作方法。它们不使用 this、super 或 arguments 等绑定关键字。
• 构造函数源自箭头函数，并向其发送新请求会引发 TypeError。此外，它们无法使用 new.target 关键字。
• 箭头函数不是生成器函数；它们不能在其主体中使用 yield。

语法

以下演示语法代表 JavaScript 中的箭头函数。我们可以使用箭头符号及其参数进行加法运算。

我们可以调用函数并显示输出。

 
Let variable_name = function_name(2, 5);
Console.log(variable_name);

示例

以下示例显示了带有 alert 和 console 标签的箭头函数。

输出

普通函数和箭头函数比较表

以下方面显示了普通函数和箭头函数的比较。

普通函数和箭头函数之间的关键区别

普通函数和箭头函数之间存在一些区别。每个关键区别都将详细讨论。

1. 函数语法

常规函数使用 function 关键字和花括号，并用于多个表达式。如果只有一个表达式，则不需要花括号，因为函数将隐式返回结果。箭头函数使用带有箭头符号的代码。

正则表达式

以下语法使用常规表达式。

箭头函数

以下语法使用箭头表达式。

2. 函数匿名

普通函数不是匿名的，这意味着它使用函数名并执行表达式。箭头函数是匿名的，这意味着它显示一个未命名的函数，并且没有标识符。相反，它们与变量关联或作为另一个函数的参数传递。

正则表达式

以下语法使用非匿名的常规表达式。

箭头函数

以下语法显示箭头表达式是匿名的。

3. 箭头函数中没有 arguments (类似于数组对象的 arguments)

如果我们不知道参数的数量，那么函数将在单个变量中接收所有参数/形参。它在箭头函数中没有 arguments。如果尝试检索 arguments，箭头函数将引发“Uncaught Reference error: arguments is not defined”错误。

参数看起来像一个数组。Length 属性用于联合类数组对象和数组对象。区别在于类数组对象缺少内置数组方法；但是，我们可以通过使用展开运算符或 Array.from 运算符将类数组对象转换为数组对象。

常规表达式示例

以下示例使用常规表达式，它在函数中允许使用 arguments。

函数。

输出

箭头函数示例

以下示例显示了一个箭头表达式，它在函数中使用 arguments。

console 标签显示了箭头函数中 arguments 的错误。

输出

4. 箭头函数中没有 prototype 对象

与传统的普通函数相比，箭头函数缺少 prototype 对象。尝试检索箭头函数的 prototype 将导致 undefined 错误。

常规表达式示例

以下示例使用常规表达式，它允许使用“prototype”关键字。

输出

输出显示了“prototype”关键字的函数值。

箭头函数示例

以下示例显示了一个带有“prototype”关键字的箭头表达式。console 标签显示了箭头函数中 new 关键字的错误。

输出

输出显示了“prototype”关键字的 undefined 值。

5. new 关键字无法调用 (不是构造函数)

我们无法使用 new 关键字调用箭头函数，因为箭头函数缺乏构造函数。如果您尝试使用 new 关键字实例化，它将产生错误。

常规表达式示例

以下示例使用带有“new”关键字的常规表达式。

输出

输出显示了“new”关键字的函数值。

箭头函数示例

以下示例显示了一个带有“this”关键字的箭头表达式。console 标签显示了箭头函数中 new 关键字的错误。

输出

输出显示了“new”关键字的 undefined 值。

6. 不使用“this”关键字 (call、apply 和 bind 操作不按预期工作)

经典函数的默认“this”值是动态的，并根据函数如何执行而变化。与普通函数不同，箭头函数不包含自己的绑定。如果我们访问箭头函数中的 this，它将返回最近的非箭头父函数的 this。

箭头函数的值是固定的。它在声明时设置，并且对于函数操作永远不会改变。因此，箭头函数 (this) 的值无法通过 call、apply 或 bind 来更改。

常规表达式示例

以下示例使用常规表达式，它允许使用“this”关键字。

输出

输出显示了“this”关键字的函数值。

输出

输出显示了 alert 标签。

箭头函数示例

以下示例显示了一个带有“this”关键字的箭头表达式。console 标签显示了箭头函数中“this”关键字的错误。

输出

输出显示了“this”关键字的 undefined 值。

输出

输出显示了 alert 标签。

7. 不用于生成器函数

生成器函数使用 function* 语句定义，即函数关键字后跟一个星号。箭头函数的主体不能包含 yield 关键字（除非它包含在进一步嵌套的函数中）。箭头函数不能用作生成器。

常规表达式示例

以下示例使用常规表达式，它允许使用生成器函数。

输出

输出显示了生成器函数的加法。

箭头函数示例

以下示例显示箭头表达式不是生成器函数。console 标签显示了箭头函数中生成器函数的错误。

输出

输出显示了生成器函数的错误。

8. 不允许重复参数名称

在非严格模式下，常规函数允许使用重复命名的参数。然而，在严格模式下是不允许的。与普通函数不同，箭头函数在严格或非严格模式下都不接受重复参数。当存在重复参数时，会引发 Syntax Error。

常规表达式示例

以下示例使用常规表达式，它允许重复参数。

输出

输出显示了生成器函数的错误。

箭头函数示例

以下示例显示箭头表达式不允许重复参数。console 标签显示了函数中相同名称参数的错误。

输出

输出显示了相同参数的错误。

结论

根据操作使用普通函数和箭头函数的区别。普通函数用于多个表达式，而箭头函数用于简单表达式。