箭头函数的基本概念
ES6 中的箭头函数是一种新的函数语法，它可以让我们更加简洁地定义函数。箭头函数使用箭头 (=>) 来定义函数，它的语法如下：
(param1, param2, …, paramN) => { statements }其中，param1, param2, …, paramN 是函数的参数，statements 是函数体。箭头函数的特点是它没有自己的 this，它的 this 始终指向它所在的作用域的 this。这就是箭头函数和普通函数的最大区别。
箭头函数和普通函数的区别
1. 箭头函数没有自己的 this
在普通函数中，this 的值取决于函数的调用方式。如果是通过对象调用函数，this 的值就是该对象；如果是通过 apply 或 call 调用函数，this 的值就是传入的第一个参数。而在箭头函数中，this 的值始终指向它所在的作用域的 this。下面是一个示例代码：
-- -------------------- ---- -------
----- --- - -
----- ------
-------- ---------- -
-----------------------
--
------------- -- -- -
-----------------------
-
-
-------------- -- -- -----
------------------- -- -- ---------在上面的代码中，sayName 是一个普通函数，它的 this 值指向 obj 对象。而 sayNameArrow 是一个箭头函数，它的 this 值指向它所在的作用域的 this，也就是全局作用域的 this，因此输出 undefined。
2. 箭头函数不能使用 arguments 对象
在普通函数中，我们可以使用 arguments 对象来访问函数的参数。但是在箭头函数中，arguments 对象是不存在的。下面是一个示例代码：
-- -------------------- ---- ------- -------- ----- - ----------------------- - ------ -- --- -- -- --- -- -- ----- -------- - -- -- - ----------------------- - ----------- -- --- -- ------------ -- --- -------
在上面的代码中，sum 是一个普通函数，它可以使用 arguments 对象访问函数的参数。而 sumArrow 是一个箭头函数，它不能使用 arguments 对象，因此会报错。
3. 箭头函数不能作为构造函数使用
在普通函数中，我们可以使用 new 关键字将函数作为构造函数来使用。而在箭头函数中，它没有自己的 this，因此不能作为构造函数使用。下面是一个示例代码：
-- -------------------- ---- ------- -------- ------------ - --------- - ----- - ----- ------ - --- -------------- ------------------------- -- -- ----- ----- ----------- - ------ -- - --------- - ----- - ----- ----------- - --- ------------------- -- -------------- -- --- - -----------
在上面的代码中，Person 是一个普通函数，它可以作为构造函数使用。而 PersonArrow 是一个箭头函数，它不能作为构造函数使用，因此会报错。
总结
ES6 中的箭头函数是一种新的函数语法，它可以让我们更加简洁地定义函数。箭头函数和普通函数的最大区别是箭头函数没有自己的 this，它的 this 始终指向它所在的作用域的 this。除此之外，箭头函数不能使用 arguments 对象，也不能作为构造函数使用。在实际开发中，我们需要根据实际情况选择使用普通函数还是箭头函数。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d3421cadd4f0e0ffb8cd19