在 ECMAScript 2017 中使用箭头函数代替函数表达式
ECMAScript 2017 是 Javascript 的最新标准，它带来了许多新的特性和语法，其中包括箭头函数。箭头函数是一个非常强大、简单和易于使用的概念，它可以代替传统的函数表达式，提供更加灵活和简洁的语法。
箭头函数与传统的函数表达式非常相似，但却有一些重要区别。箭头函数可以使用更少的代码来定义函数，而且语法非常简单。在现今的前端开发中，使用箭头函数已经成为一种主流的编码方式。
- 箭头函数的基本语法
箭头函数的基本语法如下所示：
(argument) => { code block };其中，argument 表示函数的参数，可以是一个参数或多个参数，用逗号分隔。采用花括号包裹的 code block 表示函数体，可以是一条语句或多条语句。如果代码块只包含一条语句，就可以省略花括号并在代码后面使用分号。
- 箭头函数的特性
箭头函数具有以下的特性：
- 摆脱 this 的束缚
箭头函数的最大亮点就是让程序员摆脱 this 的束缚，避免了 this 的指向问题。在箭头函数中，this 的指向是引用箭头函数外部的 this 值，而不是当前对象。
例如，使用传统的函数表达式时，我们需要在代码中明确使用 this 关键字来访问对象中的属性或方法，往往容易出错：
-- -------------------- ---- -------
--- --- - -
----- -------
---- ---
------ ---------- -
--- ---- - -----
--------------------- -
---------------- - -- - - --------- - -- - - -------- - - ----- -------
-- ---
-
--
------------ -- -- ----上述代码中，setTimeout 异步函数中的 this 关键字指向的是全局对象，而非当前的 obj 对象。为了解决这个问题，我们通常需要将 this 保存在 that 变量中，并在 setTimeout 异步函数内部使用 that 变量来访问对象属性或方法。
但是，如果我们使用箭头函数来定义 sayHi 方法，那么就可以不用编写额外代码直接访问 this 对象。如下所示：
-- -------------------- ---- -------
--- --- - -
----- -------
---- ---
------ ---------- -
------------- -- -
---------------- - -- - - --------- - -- - - -------- - - ----- -------
-- ---
-
--
------------ -- -- ----由于箭头函数中的 this 自动绑定到了 obj 对象上，我们无需使用额外的变量来解决这个问题。
- 简化了语法
箭头函数的语法很简洁，可以大大减少代码的书写量。例如：
// 传统的函数表达式
var add = function(a, b) {
return a + b;
};
// 箭头函数
var add = (a, b) => a + b;显然，箭头函数比传统的函数表达式简洁了很多，因此在实际开发中，箭头函数得到了广泛的使用。
- 箭头函数的使用场景
箭头函数在很多场合下都可以使用。下面是一些常见的使用场景：
- 事件函数
当你需要使用事件函数时，可以考虑使用箭头函数。例如：
$(".btn").click(() => {
console.log("Clicked.");
});- 数组方法
当你需要遍历一个数组时，可以考虑使用箭头函数。例如：
var fruits = ["apple", "banana", "orange", "pear"]; var upperFruits = fruits.map(fruit => fruit.toUpperCase()); console.log(upperFruits); // ["APPLE", "BANANA", "ORANGE", "PEAR"]
- 对象方法
当你需要定义一个对象方法时，可以考虑使用箭头函数。例如：
var obj = {
init() {
console.log("initialized.");
},
sayHi: () => {
console.log("Hi.");
}
};- 实际示例代码
下面是一个实际使用示例代码：
-- -------------------- ---- -------
-------- ------------ -
-------- - --- -- -- - - --
------------- - --- -- -- - - --
------------- - --- -- -- - - --
----------- - --- -- -- - - --
-
--- ------ - --- -------------
------------------------- ---- -- -
------------------------------ ---- -- -
------------------------------ ---- -- -
---------------------------- ---- -- -上述代码定义了一个 Calculator 类，该类包含四个方法：add、subtract、multiply 和 divide。在每个算术方法中，我们都使用了箭头函数来定义函数体，以提供简洁而强大的语法。
- 总结
箭头函数是 ECMAScript 2017 中非常实用的特性之一，它为前端开发者提供了更加灵活、简洁的语法。在实际开发中，我们可以使用箭头函数来避免 this 指向的问题，并且能够大大简化代码的书写。然而，因为箭头函数与传统的函数表达式相比具有更加严格的语法限制，所以编写箭头函数时需要了解其规则和适用场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c20c6b83d39b488162c0fd