ECMAScript 2017 中的箭头函数与普通函数的区别及应用
在 ECMAScript 2017 中，箭头函数成为了很多前端工程师喜欢使用的一种函数表达式。与传统的函数表达式相比，箭头函数有其自己的一些特点和应用场景。本文将对 ECMAScript 2017 中的箭头函数与普通函数的区别及其应用进行详细的介绍。
1. 箭头函数的语法
在 ECMAScript 2017 中，箭头函数的语法如下：
-------- ------- -- ------- -- - ---------- - -------- ------- -- ------- -- ----------
其中，参数列表 (param1, param2, …, paramN) 可以是任意数量的参数，可以是有默认值的参数，也可以是解构赋值的参数。语句块 { statements } 中的代码可以是任意合法的 JavaScript 代码，有时也可以省略花括号，并且在省略语句块时，表达式 expression 的结果会被视为箭头函数的返回值。
2. 箭头函数的特点
与普通函数相比，箭头函数有以下特点：
（1）无 this 绑定
箭头函数中没有自己的 this，它使用的是外层函数的 this 值。这种特性可以避免传统函数中 this 指向发生变化的问题，使代码的逻辑更加清晰，不易出错。
示例代码：
--- --- - -
----- --------
----- ---------- -
--------------------- -
----------------------- -- -- ---------
-- ------
-
--
-----------
--- ---- - -
----- --------
----- ---------- -
------------- -- -
----------------------- -- -- -----
-- ------
-
--
------------（2）无 arguments 对象
由于箭头函数没有自己的执行上下文，所以它也没有自己的 arguments 对象。在箭头函数中使用 arguments 会引用到外部函数的 arguments 对象。
示例代码：
-------- ------- - --- --- - -- -- ------------- ------------------- -- -- - - -------- -- --- -------- ------- - --- --- - ---------- - ------ ------------- -- ------------------- -- -- --------- - -------- -- ---
（3）无法作为构造函数使用
箭头函数没有自己的 prototype，所以不能被用作构造函数。如果你尝试使用 new 关键字来调用箭头函数，会抛出一个 TypeError 错误。
（4）无法使用 yield 关键字
箭头函数不能用于 Generator 函数中，因此在箭头函数中无法使用 yield 关键字。
3. 箭头函数的应用
箭头函数主要用于简化代码和解决 this 绑定的问题。下面会介绍一些常见的应用场景。
（1）函数回调中的使用
在回调函数中，传递箭头函数可以避免回调函数中 this 指向的问题，让代码更加简洁易读。
示例代码：
--- --- - --- -- --- ----------------- -- --------------------
（2）对象方法中的使用
在对象方法中，如果使用箭头函数作为方法，可以避免方法内部的 this 指向问题。
示例代码：
--- --- - -
----- --------
----- -- -- -
----------------------- -- ---------
-
--
-----------（3）动态生成函数的使用
在需要动态生成多个相似函数时，使用箭头函数可以更加简洁。
示例代码：
--- --- - --- -- --- --- ----- - ------------- -- -- -- -------------------- ----------- -- -- -
4. 总结
本文介绍了 ECMAScript 2017 中的箭头函数与普通函数的区别及其应用。需要注意的是，在使用箭头函数时，要考虑到它不能作为构造函数使用，也不能在 Generator 函数中使用 yield 关键字。但在函数回调、对象方法、动态生成函数等场景下，选择使用箭头函数可以使代码更加简洁明了，并且避免了 this 绑定的问题。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64fef15795b1f8cacdd9d132