在 ES6 中，新增了一种函数类型——箭头函数。相比普通函数，箭头函数具有一些不同之处。本文将详细介绍箭头函数和普通函数的差异，并且探讨它们的适用场景。
箭头函数和普通函数的不同之处
- 语法不同
箭头函数使用箭头（=>）来定义，而普通函数使用 function 关键字。
// 箭头函数
const add = (a, b) => a + b;
// 普通函数
function add(a, b) {
return a + b;
}- this 指向不同
箭头函数的 this 指向是固定的，指向定义时所在的作用域；普通函数的 this 指向则是在调用时确定的。
-- -------------------- ---- -------
-- ----
----- ------ - -
----- --------
------ ---------- -
----- ----- - -- -- -
------------------- -- ---- -- ---------------
--
--------
--
--
--------------- -- --------- -- ---- -- -----
-- ----
----- ------ - -
----- --------
------ ---------- -
-------- ------- -
------------------- -- ---- -- ---------------
-
--------
--
--
--------------- -- --------- -- ---- -- ---------- 无法使用 arguments 对象
箭头函数没有自己的 arguments 对象，所以在箭头函数中使用 arguments 会引用外层函数的 arguments。
-- -------------------- ---- -------
-- ----
-------- ----- -
----- --- - -- -- -
--------------------------
--
------
-
------- -- ----
-- ----
-------- ----- -
----- --- - ---------- -
--------------------------
--
------
-
------- -- ----箭头函数和普通函数的适用场景
- 适用箭头函数的场景
- 回调函数：箭头函数可以更简洁地表示回调函数，避免了使用
bind或者that = this的方式来绑定this。 - 简单的函数体：箭头函数适用于函数体比较简单的情况，可以更加简洁地表达函数的含义。
- 适用普通函数的场景
- 需要使用
this的场景：普通函数可以使用this关键字来引用调用函数的对象，比如在构造函数中创建对象。 - 需要使用
arguments对象的场景：普通函数可以使用arguments对象来获取传递给函数的参数，比如在处理可变参数的函数中。
示例代码
下面是一些示例代码，展示箭头函数和普通函数的差异和适用场景。
- 回调函数
-- -------------------- ---- ------- -- ------ ----- ------- - --- -- -- -- --- ----- ------- - --------------- -- - - --- -- ------ ----- ------- - --- -- -- -- --- ----- ------- - ----------------------- - ------ - - -- ---
- 构造函数
-- -------------------- ---- -------
-- ------
-------- ------------ -
--------- - -----
------------ - ---------- -
--------------- ---- -- ---------------
--
-
----- ----- - --- ----------------
---------------- -- ----- ---- -- -----
-- ------
----- ------ - ------ -- -
--------- - -----
------------ - -- -- -
--------------- ---- -- ---------------
--
--
----- ----- - --- ----------------
---------------- -- -- --------- --- 处理可变参数的函数
-- -------------------- ---- -------
-- ------
-------- ----- -
--- ----- - --
--- ---- - - -- - - ----------------- ---- -
----- -- -------------
-
------ ------
-
------ -- -- -- --- -- -----
-- ------
----- --- - -- -- -
--- ----- - --
--- ---- - - -- - - ----------------- ---- -
----- -- -------------
-
------ ------
--
------ -- -- -- --- -- -- -------------- --总结
箭头函数和普通函数各有优缺点，应该根据具体的场景来选择使用哪种函数。在使用箭头函数时，需要注意它的 this 指向和无法使用 arguments 对象的问题。在使用普通函数时，需要注意它的函数体可能会比较冗长。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bcc41aadd4f0e0ff5b8e7b