ES6 中使用箭头函数的注意事项
箭头函数是 ES6 中新增的一种函数形式，相比传统函数语法有所简化和优化，其语法更加简洁，并且可以避免 this 绑定的问题。但是，在使用箭头函数时，我们还是需要注意一些细节。
箭头函数的基本语法
箭头函数的基本语法是：（参数）=>（语句块）
其中，参数和语句块的书写方式和传统函数相同，唯一不同的是箭头符号（=>），该符号用来分割参数和语句块。
箭头函数的注意事项
- 箭头函数无法使用 arguments 对象
传统函数在内部可以使用 arguments 对象访问函数的参数列表，但是箭头函数无法使用 arguments 对象，所以如果需要访问参数，必须通过显式参数传递的方式访问，例如：
-- -------------------- ---- -------
----- --- - --------- -- -
--- ----- - --
--- ---- --- -- ----- -
----- -- ----
-
------ ------
--
------------------ -- ---- ---- 箭头函数无法作为构造函数使用
箭头函数不支持 new 操作符，因此无法用作构造函数创建实例，如果尝试使用 new 操作符调用箭头函数，则会导致错误。
- 箭头函数没有自己的 this，会捕获外层 this 值
箭头函数没有自己的 this 值，相反，箭头函数会捕获外层函数的 this 值作为自己的 this 值，这种行为被称为“词法作用域（lexical scoping）”。
这种行为在某些情况下可能会导致问题，例如：
-- -------------------- ---- -------
----- ------ - -
----- --------
-------- ---------- -
--------------- ---- -- - - -----------
--
------------- -- -- -
--------------- ---- -- - - -----------
-
--
----------------- -- -- ---- -- -----
---------------------- -- -- ---- -- ---------在上述例子中，传统函数 sayName 使用的是对象 person 的 this 值，而箭头函数 sayNameArrow 使用的是全局作用域的 this 值，因此 this.name 为 undefined。
为了解决这种问题，我们可以使用 bind 方法或者显示绑定来明确箭头函数的 this 值，例如：
-- -------------------- ---- -------
----- ------ - -
----- --------
-------- ---------- -
--------------- ---- -- - - -----------
--
------------- ---------- -
------------- -- -
--------------- ---- -- - - -----------
-- -----
-
--
----------------- -- -- ---- -- -----
---------------------- -- -- ---- -- -----在这个例子中，我们将箭头函数作为 setTimeout 的回调函数传递，并且使用箭头函数捕获外层函数的 this 值（即对象 person 的 this 值），从而正确的输出了 person 的 name 属性。
- 箭头函数无法使用 yield，也无法作为生成器函数
由于箭头函数没有自己的上下文环境，也没有原型对象，因此无法使用 yield 语句，也无法作为生成器函数使用。
结论
在实际项目中，我们应该根据具体情况选择使用箭头函数或者传统函数。当我们需要简化语法和避免 this 绑定的问题时，可以使用箭头函数；当我们需要使用 arguments 对象、构造函数、原型链等特性时，则应该使用传统函数。
示例代码：
-- -------------------- ---- -------
-- --------
----- --- - --------- -- -
--- ----- - --
--- ---- --- -- ----- -
----- -- ----
-
------ ------
--
------------------ -- ---- ---
-- --------
-------- ------------ -
--- ----- - --
--- ---- --- -- ----- -
----- -- ----
-
------ ------
-
------------------ -- ---- ---
-- ----- ---- --
----- ------ - -
----- --------
-------- ---------- -
--------------- ---- -- - - -----------
--
------------- ---------- -
------------- -- -
--------------- ---- -- - - -----------
-- -----
-
--
----------------- -- -- ---- -- -----
---------------------- -- -- ---- -- -----
-- --------------
----- ----------- - ------ -- -
--------- - -----
--
----- ----- - --- --------------------- -- ------ ----------- -- --- - -----------
-- ----------
-------- ------------ -
--------- - -----
-
----- --- - --- --------------
---------------------- -- ---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674d1bf4a336082f2548d98e