ECMAScript 2017 中的箭头函数与普通函数的区别及应用-JavaScript中文网-JavaScript教程资源分享门户

ECMAScript 2017 中的箭头函数与普通函数的区别及应用

在 ECMAScript 2017 中，箭头函数成为了很多前端工程师喜欢使用的一种函数表达式。与传统的函数表达式相比，箭头函数有其自己的一些特点和应用场景。本文将对 ECMAScript 2017 中的箭头函数与普通函数的区别及其应用进行详细的介绍。

1. 箭头函数的语法

在 ECMAScript 2017 中，箭头函数的语法如下：

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression

其中，参数列表 (param1, param2, …, paramN) 可以是任意数量的参数，可以是有默认值的参数，也可以是解构赋值的参数。语句块 { statements } 中的代码可以是任意合法的 JavaScript 代码，有时也可以省略花括号，并且在省略语句块时，表达式 expression 的结果会被视为箭头函数的返回值。

2. 箭头函数的特点

与普通函数相比，箭头函数有以下特点：

（1）无 `this` 绑定

箭头函数中没有自己的 this，它使用的是外层函数的 this 值。这种特性可以避免传统函数中 this 指向发生变化的问题，使代码的逻辑更加清晰，不易出错。

示例代码：

-- -------------------- ---- -------
--- --- - -
  ----- --------
  ----- ---------- -
    --------------------- -
      ----------------------- -- -- ---------
    -- ------
  -
--
-----------

--- ---- - -
  ----- --------
  ----- ---------- -
    ------------- -- -
      ----------------------- -- -- -----
    -- ------
  -
--
------------

（2）无 `arguments` 对象

由于箭头函数没有自己的执行上下文，所以它也没有自己的 arguments 对象。在箭头函数中使用 arguments 会引用到外部函数的 arguments 对象。

示例代码：

-- -------------------- ---- -------
-------- ------- -
  --- --- - -- -- -------------
  ------------------- -- -- -
-

-------- -- ---

-------- ------- -
  --- --- - ---------- - ------ ------------- --
  ------------------- -- -- ---------
-

-------- -- ---

（3）无法作为构造函数使用

箭头函数没有自己的 prototype，所以不能被用作构造函数。如果你尝试使用 new 关键字来调用箭头函数，会抛出一个 TypeError 错误。

（4）无法使用 `yield` 关键字

箭头函数不能用于 Generator 函数中，因此在箭头函数中无法使用 yield 关键字。

3. 箭头函数的应用

箭头函数主要用于简化代码和解决 this 绑定的问题。下面会介绍一些常见的应用场景。

（1）函数回调中的使用

在回调函数中，传递箭头函数可以避免回调函数中 this 指向的问题，让代码更加简洁易读。

示例代码：

var arr = [1, 2, 3];
arr.forEach(value => console.log(value));

（2）对象方法中的使用

在对象方法中，如果使用箭头函数作为方法，可以避免方法内部的 this 指向问题。

示例代码：

var obj = {
  name: 'Alice',
  func: () => {
    console.log(this.name); // undefined
  }
};
obj.func();

（3）动态生成函数的使用

在需要动态生成多个相似函数时，使用箭头函数可以更加简洁。

示例代码：

var arr = [1, 2, 3];
var funcs = arr.map(value => () => console.log(value));
funcs[0](); // 输出 1

4. 总结

本文介绍了 ECMAScript 2017 中的箭头函数与普通函数的区别及其应用。需要注意的是，在使用箭头函数时，要考虑到它不能作为构造函数使用，也不能在 Generator 函数中使用 yield 关键字。但在函数回调、对象方法、动态生成函数等场景下，选择使用箭头函数可以使代码更加简洁明了，并且避免了 this 绑定的问题。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64fef15795b1f8cacdd9d132

ECMAScript 2017 中的箭头函数与普通函数的区别及应用