ES6 箭头函数详解及示例-JavaScript中文网-JavaScript教程资源分享门户

随着 JavaScript 应用的不断深入和发展，ES6 （ES2015）已经成为现代 JavaScript 的标准。其中，箭头函数是 ES6 中的一项重要特性，可以让开发者更加高效地编写函数，并且简化了代码的书写。

箭头函数的语法

箭头函数通过 => 符号来定义，其定义语法如下：

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

其中，params 是函数的参数，可以是多个，用逗号隔开。函数体可以是一条语句或是一个代码块。当函数体是一条语句时，可以直接使用表达式，无需使用 {} 包裹；当函数体是一个代码块时，需要使用 {} 包裹函数体。

箭头函数的特点

相较于传统的函数，箭头函数具有以下特点：

1. 箭头函数的 `this` 绑定

传统的函数中，this 关键字的指向是动态的，取决于函数的调用方式和上下文环境。

而箭头函数中，this 的指向是定义时确定的。它会继承父级最近的普通函数的this 值。如果没有发现最近的普通函数，则 this 绑定到全局对象（在浏览器中，this 绑定到 window 对象）。

举个例子：

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

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

在上面的例子中， setTimeout 中的回调函数中并不是指向 obj 对象，而是绑定到全局对象。因此输出结果为 undefined。

现在我们使用箭头函数实现如下：

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

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

在箭头函数中，this.name 指的是 obj.name，所以输出结果为 Tom。

2. 箭头函数不能作为构造函数

箭头函数不能用 new 操作符实例化对象，因此不能作为构造函数使用。如果用 new 操作符去实例化一个箭头函数，则会抛出一个异常。

3. 箭头函数没有 `arguments` 对象

箭头函数没有自己的 arguments 对象，因此，也无法使用 arguments 对象来获取传递给函数的参数。但是，它可以通过可变参数 ...args 获取传递给该函数的参数：

const printArgs = (...args) => {
  console.log(args);
}

printArgs(1, 2, 3);  // [1, 2, 3]

箭头函数的示例代码

1. 简化回调函数的书写

const nums = [1, 2, 3, 4, 5];

const doubledNums = nums.map((num) => num * 2);

console.log(doubledNums);  // [2, 4, 6, 8, 10]

2. 简化函数体的书写

const greeting = name => `Hello ${name}!`;

console.log(greeting("world"));  // Hello world!

3. 组合使用箭头函数和模板字面量

const fullName = (first, last) => `${first} ${last}`;

console.log(fullName("Tom", "Jerry"));  // Tom Jerry

总结

通过本文，我们了解了 ES6 中箭头函数的语法、特点和示例代码。知道了箭头函数在书写函数体、简化回调函数书写、去除 var 关键字等等的优点。同时，也需要了解其在 this 绑定、不能作为构造函数、无法使用 arguments 等方面的限制和注意事项。相信读者在使用箭头函数的时候，能够更加高效地写出精简而可读性强的代码。

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

ES6 箭头函数详解及示例