在 ES6 中，引入了箭头函数这个新的函数语法。箭头函数相对于普通函数有不少的差异，本文将详细介绍这些差异以及它们的使用场景比较。
箭头函数和普通函数的差异
语法
箭头函数的语法比较简洁，只需要在参数列表后面加上箭头符号 =>，再加上函数体就可以了。例如：
-- -------------------- ---- ------- -- ---- -------- ------ -- - ------ - - -- - -- ---- ----- --- - --- -- -- - ------ - - -- --
可以看到，箭头函数的语法比较简洁，可以让代码更加清晰易懂。
this 指向
箭头函数和普通函数最大的差异就是 this 指向的问题。
在普通函数中，this 的指向是动态的，它会根据函数被调用时的上下文环境而发生改变。例如：
-- -------------------- ---- -------
----- ------ - -
----- -----
------ ---------- -
---------------- -----------------
-
--
--------------- -- --- ----
----- ----- - -------------
-------- -- --- -----------可以看到，在第二个调用中，sayHi 函数的 this 指向变成了全局对象，因此输出 undefined。
而在箭头函数中，this 的指向是静态的，它会继承箭头函数外部的 this。例如：
-- -------------------- ---- -------
----- ------ - -
----- -----
------ ---------- -
----- -------- - -- -- -
------------------- -----------------
--
-----------
-
--
--------------- -- ------ ----
----- ----- - -------------
-------- -- ---------- ------ ---- -------- ------ -- ---------可以看到，在箭头函数中，this 的指向是继承了外部的 this，因此输出了正确的结果。
arguments 对象
在普通函数中，arguments 对象表示函数的参数列表。而在箭头函数中，它不再存在，需要使用 rest 参数来代替。例如：
-- -------------------- ---- -------
-- ----
-------- ----- -
--- ----- - --
--- ---- - - -- - - ----------------- ---- -
----- -- -------------
-
------ ------
-
-- ----
----- --- - --------- -- -
--- ----- - --
--- ---- - - -- - - ------------ ---- -
----- -- --------
-
------ ------
--可以看到，在箭头函数中，需要使用 rest 参数来代替 arguments 对象。
箭头函数的使用场景
简洁的回调函数
箭头函数可以让回调函数的语法更加简洁。例如：
const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map(n => n * 2); console.log(doubled); // [2, 4, 6, 8, 10]
可以看到，使用箭头函数可以让代码更加简洁易懂。
对象方法
箭头函数可以方便地定义对象的方法。例如：
const person = {
name: '张三',
sayHi: () => {
console.log(`Hi, 我是${this.name}`);
}
};
person.sayHi(); // Hi, 我是undefined可以看到，使用箭头函数定义对象的方法时，this 的指向是不正确的。
简化的闭包
箭头函数可以简化闭包的语法。例如：
-- -------------------- ---- -------
-------- --------------- -
--- ----- - --
------ -
---------- -- -- --------
--------- -- -- -----
--
-
----- ------- - ----------------
--------------------
-------------------------------- -- -可以看到，使用箭头函数可以让代码更加简洁易懂。
总结
本文详细介绍了箭头函数和普通函数的差异以及它们的使用场景比较。箭头函数的语法比较简洁，可以让代码更加清晰易懂。但是需要注意它的 this 指向和 arguments 对象的问题。在使用箭头函数时，需要根据具体的场景来决定是否使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6509159295b1f8cacd3dfc5e