随着 ES6 的推广，箭头函数成为了前端开发中一个热门话题。箭头函数与普通函数的区别及其应用场景成为了前端从业者必须掌握的一项技能。在本篇文章中，我们将深入探讨箭头函数和普通函数的区别，并介绍它们各自的应用场景。
ES6 中的箭头函数
ES6 中的箭头函数是一种新的函数定义方式。它可以极大地简化函数的定义过程，并减少需要使用的代码量。
箭头函数的语法如下：
(param1, param2, …, paramN) => { statements }其中，(param1, param2, ..., paramN) 表示函数的参数列表，=> 为箭头函数标识符，{ statements } 表示函数体。箭头函数可以根据代码的需要省略参数列表以及函数体。
接下来，我们将通过比较箭头函数与普通函数的区别来更好地了解箭头函数。
箭头函数与普通函数的区别
1. 箭头函数没有自己的 this，它继承外部函数的 this
在 JavaScript 中，this 关键字经常被用于引用当前对象的上下文。但是，在普通函数中，this 的值可以随着调用方式的不同而变化。例如：
-- -------------------- ---- -------
-- ------
----- ------ - -
----- --------
-- ------
--------- ---------- -
------------------- -- ---- -- ---------------
-
--
-- -------
------------------ -- -- ------- -- ---- -- ------
-- --------
-------- ---------------- -
------------------- -- ---- -- ---------------
-
-- --------------
----- ------- - - ----- ----- --
---------------------- - ---------------
------------------------- -- -- ------- -- ---- -- ----
-- --------
----------------- -- -- ------- -- ---- -- ----------在上述示例中，this 在 person.sayHello() 调用中指向了 person 对象，而在 person2.sayHelloGlobal() 和 sayHelloGlobal() 中却指向了 window 对象。由于箭头函数没有自己的 this，所以 this 指向进入箭头函数体的上下文。因此，如果我们将上述例子的普通函数改为箭头函数，这个问题就会得到解决。
-- -------------------- ---- -------
-- ------
----- ------ - -
----- --------
-- ------
--------- -- -- -
------------------- -- ---- -- ---------------
-
--
-- -------
------------------ -- -- ------- -- ---- -- ----------在上述示例中，箭头函数中的 this 指向了 window 对象，而不是 person 对象。这是因为箭头函数没有自己的 this，而是继承了外部函数的 this 值。由于 person.sayHello() 中的 this 指向了 person 对象，所以它的值为 undefined。
2. 箭头函数没有 arguments 对象
在普通函数中，可以通过 arguments 对象引用传递给函数的所有参数。但是，在箭头函数中，arguments 对象不可用。由于箭头函数没有自己的参数列表，它必须依赖于外部函数传递的参数。如果需要在箭头函数中使用传递的参数，可以使用剩余参数的形式（即 ...args）。
-- -------------------- ---- -------
-------- -------------- -
--- ---- - - -- - - ----------------- ---- -
--------------------------
-
-
--------------- -- -- --- -- -- - - - -
----- ----------------- - --------- -- -
--- ---- - - -- - - ------------ ---- -
---------------------
-
--
-------------------- -- -- --- -- -- - - - -在上述示例中，printNumbers 函数使用 arguments 对象来输出传递给它的所有参数，而 printNumbersArrow 箭头函数使用剩余参数的形式来输出传递给它的所有参数。
3. 箭头函数不能用作构造函数
在 JavaScript 中，构造函数是一种 Create Object 范式的特殊形式。它允许您创建出一个特定类的新对象。每个构造函数都可以使用 new 关键字来创建新的对象实例。
但是，由于箭头函数没有自己的 this，也不能使用 new 关键字来创建新的对象实例。因此，你不能在支持构造函数的类中使用箭头函数。
-- -------------------- ---- ------- -------- ------------ ---- - --------- - ----- -------- - ---- - ----- ------ - --- -------------- ---- ----- ----------- - ------ ---- -- - --------- - ----- -------- - ---- - ----- ----------- - --- ------------------- ---- -- -------------- ------
在上述示例中，我们定义了一个普通函数 Person 和一个箭头函数 PersonArrow。我们通过这两个函数分别创建了两个对象 person 和 personArrow。person 能够成功地创建，而 personArrow 则会抛出一个 TypeError 异常，因为箭头函数不能用作构造函数。
箭头函数的应用场景
前面我们已经了解了箭头函数与普通函数之间的区别。根据这些区别，我们可以将箭头函数用于以下场景：
1. 作为匿名函数
箭头函数可以很方便地作为匿名函数使用。这种用法和普通函数非常类似。
const multiply = (a, b) => a * b; const result = multiply(2, 3); // 6
在上述示例中，我们定义了一个名为 multiply 的箭头函数。我们通过调用 multiply(2, 3) 将 result 赋值为 6。
2. 作为回调函数
箭头函数可以很好地作为回调函数使用。这种用法可以使代码更简洁、易读，并能减少开发时间。
-- -------------------- ---- ------- -- -- -------------- ----- ------ - --------- --------- ---------- ----- ------------ - ---------------- -- -------------- -- --- -- -- -- -- -------------- ----- ------- - --------- --------- ---------- ----- ------------- - --------------------------- - ------ ------------- --- -- --- -- --
在示例 1 中，我们使用箭头函数将每个水果的长度存储在一个数组中。在示例 2 中，我们使用普通函数来完成相同的任务。显然，我们可以看到箭头函数写法更简洁。
3. 作为 Promise 包装函数
箭头函数经常被用作 Promise 包装函数。这种用法使 Promise 链更加易于读取和管理。
-- -------------------- ---- -------
----- ----------- - ------ -- -
------ --- ----------------- ------- -- -
------------------------------------------------
-------------- -- ----------------
---------- -- --------------
------------ -- ---------------
---
--
----------------
---------- -- ------------------
------------ -- --------------------在上述示例中，我们定义了一个名为 getUserInfo 的箭头函数。当调用 getUserInfo 函数时，它会通过网络获取一个用户的信息。这个函数返回一个 Promise，可以通过 then 和 catch 方法来管理成功和失败的情况。
总结
在本篇文章中，我们深入探讨了箭头函数与普通函数的区别及其应用场景。我们了解到，箭头函数没有自己的 this，不能用作构造函数，也没有 arguments 对象。此外，我们也介绍了箭头函数的三种常见应用场景：作为匿名函数、作为回调函数和作为 Promise 包装函数。掌握这些知识可以帮助你更好地使用箭头函数来编写简洁、易读的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646c95eb968c7c53b0b8b369