随着 JavaScript 的日益普及，前端开发者开始喜欢使用 ECMAScript 2017 中的箭头函数。箭头函数是一种与传统函数不同的语法结构，它们是一个简化版本的函数，可以更容易地编写代码和提高可读性。不过，箭头函数并不是所有情景下都比传统函数更好。本文将探究一下在不同场合下，箭头函数和传统函数的优缺点。
箭头函数的优点
简洁的语法
箭头函数可以使用简洁的语法来声明函数。例如，下面的两个函数在功能上是相同的：
-- ---- -------- ------ -- - ------ - - -- - -- ---- ----- --- - --- -- -- - - --
可以看到，箭头函数的语法更简洁，使得代码更加易于理解和维护。
独立的 this
在传统函数中，this 关键字的值随着函数的调用方式而改变。这通常会导致在回调函数和嵌套函数中出现困惑和错误。而在箭头函数中，this 的值是在定义函数时确定的，它指向包含箭头函数的上下文。这使得箭头函数更加易于使用和理解：
-- -------- ----
----- ------ - -
----- -----
------ ---------- -
---------------------------------
-
--
------------------------ ----- -- -- ---------
-- -------- ----
----- ------ - -
----- -----
------ -- -- -
---------------------------------
-
--
------------------------ ----- -- -- ----------------更好的性能
箭头函数相对于传统函数的性能更高。这是因为箭头函数的内部结构更简单，没有自己的 this，arguments，super 或 new.target。这使得 ECMAScript 引擎可以更轻松地优化和执行它们。
箭头函数的缺点
不能作为构造函数
箭头函数不能用作构造函数。由于箭头函数没有自己的 this，无法使用 new 生成新的实例。如果尝试使用 new 构造箭头函数，将会抛出 TypeError 异常。
----- ------ - ------ ---- -- - --------- - ----- -- ---------- ------ -- --- - ----------- -------- - ---- -- ----- - - --- ------------ ----
没有 arguments 对象
在箭头函数中，没有 arguments 对象。如果需要访问参数，必须使用 rest 参数：
-- -- ---- ------
----- --- - --------- -- -
--- ------ - --
--- ---- --- -- ----- -
------ -- ----
-
------ -------
--传统函数的优点
可以作为构造函数
传统函数可以作为构造函数使用，即可以用 new 生成新的实例。这使得传统函数更加灵活和适应不同的场景。
-------- ------------ ---- - --------- - ----- -------- - ---- - ----- - - --- ------------ ----
有 arguments 对象
在传统函数中，可以使用 arguments 对象访问函数的参数。这使得传统函数更加灵活，可以适应多种不同的场景。
-------- ----- -
--- ------ - --
--- ---- - - -- - - ----------------- ---- -
------ -- -------------
-
------ -------
-结论
简单来说，箭头函数相对于传统函数有简洁的语法、独立的 this 和更好的性能。而传统函数则可以作为构造函数使用，并且具有 arguments 对象。因此，在选择使用箭头函数还是传统函数时，需要根据实际情况来选择合适的语法结构。
如果需要使用 this，或者需要作为构造函数使用，或者需要使用 arguments 对象，那么传统函数是更好的选择。而如果代码需要更加简洁，或者想要更好的性能，或者不需要 this，那么箭头函数是更好的选择。
示例代码
下面是使用箭头函数和传统函数分别实现的同一个函数，可以对比二者之间的差异。
-- ----- ----- ----- - ------ ---- -- - --------------------------------------- -- -- ----- -------- ----------- ---- - --------------------------------------- -
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670cc8bb5f551281025ba6aa