在 ECMAScript 2015 之前，我们在 JavaScript 中定义函数通常都是用传统的函数方式，如下所示：
-------- ------ -- -
------ - - --
-但随着 ECMAScript 6 的推出，箭头函数成为了一个新的选择。箭头函数提供了一种更加简洁明了的方式来定义函数。
箭头函数基本语法
箭头函数的语法非常简单，基本形式是：
-------- ------- ---- -- - ---------- --
箭头函数由参数列表、箭头符号和函数体组成。箭头符号 => 代表函数的定义。如果函数表达式只有一个参数，可以省略 ( )。箭头函数的函数体可以是一个表达式或花括号括起来的语句块。
下面是一个简单的加法函数的箭头函数实现示例：
----- --- - --- -- -- - - -- ------------------ ---- -- -- -
和传统函数一样，箭头函数可以有多个参数。如果没有参数，则箭头函数的参数列表中使用空括号 () 表示。
下面是一个不使用参数的箭头函数实现示例：
----- -------- - -- -- ---------------------- ----------- -- -- --------
箭头函数的 this
在传统的函数中，this 指向的是函数被调用时的对象。在箭头函数中，this 指向的是其所在的上下文，而不是调用该函数的对象。
这是由于箭头函数没有自己的 this 绑定，因此箭头函数中的 this 实际上引用的是定义箭头函数的上下文的 this 值。
下面是一个传统函数与箭头函数中 this 指向的对比：
----- --- - -
---- --
----- -
-- ------ ---- -- ---
--------------------- -
---------------------- -- -- ---------
-- ------
-- ------ ---- -- ---
------------- -- -
---------------------- -- -- -
-- ------
-
--
----------
------- - --练习
现在，请基于上述内容完成以下练习：
练习 1
请使用传统函数方式定义一个计算数组元素之和的函数 sum(arr)，其中 arr 表示一个数组，要求使用循环计算数组元素之和。
练习 2
请使用箭头函数方式定义一个计算数组元素之和的函数 sum(arr)，其中 arr 表示一个数组，要求使用 reduce 方法计算数组元素之和。
练习 3
请定义一个对象 person，该对象包含两个属性 name 和 age，和一个方法 greet()，该方法输出一个类似于 "Hello, my name is xx, I'm xx years old." 的字符串，其中 xx 分别为 name 和 age 的值。请使用传统函数方式来定义 greet() 方法。
练习 4
请重新定义 person 对象，使用箭头函数方式来定义 greet() 方法，并使用模板字符串来输出字符串，也需要输出类似于 "Hello, my name is xx, I'm xx years old." 的字符串。
总结
在 ECMAScript 2017 中使用箭头函数代替传统函数是一种趋势。箭头函数的语法简洁，函数体语句也易于理解。在箭头函数中，this 指向的是定义箭头函数的上下文的 this 值。如果你想要更加清晰、简洁地定义函数，那么箭头函数是一个不错的选择。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64c33a0e83d39b4881732581