什么是箭头函数？
箭头函数是 ECMAScript 2015 （ES6）中新增加的语法，它提供了一种更简洁和更传达开发者意图的方式来定义函数。箭头函数也可以称为“Lambda 函数”。
箭头函数的语法如下所示：
(param1, param2, …, paramN) => { statements }箭头函数可以省略参数括号和大括号，例如：
x => x * x
意为：带一个参数 x 的箭头函数，返回 x * x。
箭头函数和 this 的关系
在传统的 JavaScript 函数语法中，this 是非常容易出错的。this 是一个指向调用该函数的对象的关键字，而这个对象是在运行时确定的。当函数作为对象的一个成员函数调用时，this 就指向该对象。例如：
var myObj = {
myMethod: function() {
console.log(this);
}
};
myObj.myMethod(); // 输出 myObj 对象然而，当函数被独立调用时，它的 this 引用通常指向全局对象 window，这可能会导致潜在的问题，例如：
var myFunction = function() {
console.log(this);
};
myFunction(); // 输出 window 对象在 ECMAScript 2015 中，箭头函数可以解决这一限制。箭头函数的 this 始终指向它所在上下文中的 this，例如：
-- -------------------- ---- -------
--- ----- - -
--------- ---------- -
--- --------------- - -- -- -
------------------
--
------------------ -- -- ----- --
-
--
-----------------在这里，myObj.myMethod() 调用 myArrowFunction()，然而，myArrowFunction() 内部的 this 引用是指向 myMethod() 所在的上下文，即 myObj 对象。
示例代码
下面是一个基于上述讨论的示例代码，演示了如何在箭头函数和普通函数之间切换和对比：
-- -------------------- ---- -------
--- --------------------- - ---------------- -
-------------------------------------
------------------
--------------------
--
--- --------------- - -------- -- -
-------------------------------
------------------
--------------------
--
--- ----- - -
--------- ---------- -
------------------
---------------------------------- -------- ---------
---------------------- -------- ---------
-
--
-----------------总结
箭头函数是 ECMAScript 2015（ES6）中的一种新特性，它提供了更简洁和明确的函数语法，并且可以避免 JavaScript 中 this 的常见问题。箭头函数和传统函数之间的最大区别是 this 的指向。
虽然箭头函数在某些情况下非常有用，但并不总是适合所有场景。开发者应该根据自己的需求灵活使用不同类型的函数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f818faf6b2d6eab303c505