ES6 箭头函数(Arrow Functions)-ES6入门指南

当前位置:　首页>> 技术小册>> ES6入门指南

ES6 箭头函数是 ES6 中新增的一个语法特性，它是一种更加简洁的函数定义方式。与传统的函数定义方式不同，箭头函数具有一些独特的特性，例如语法更加简洁、函数体内的 this 关键字绑定更加直观、不需要显式地 return 等。本章节将详细介绍 ES6 箭头函数的语法、特性以及适用场景。

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

**1、箭头函数的语法**
ES6 箭头函数的语法如下所示：

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

其中，(param1, param2, …, paramN) 是函数的参数列表，{ statements } 是函数体。箭头函数不需要使用 function 关键字来定义，而是使用 => 运算符将参数列表和函数体连接起来。如果箭头函数的函数体只有一条语句，则可以省略花括号和 return 关键字，例如：

```
(param1, param2, …, paramN) => expression
```

这里的 expression 是一个表达式，它的值将作为箭头函数的返回值。

如果箭头函数的参数列表为空，则需要使用空括号表示，例如：

```
() => { statements }
```

**2、箭头函数的特性**
ES6 箭头函数有以下几个特性：

**2.1 箭头函数的 this 绑定**
在传统的函数定义方式中，函数的 this 关键字指向的是函数被调用时的对象。这个对象是动态的，可能会发生变化。在 ES6 箭头函数中，函数的 this 关键字指向的是函数定义时所在的对象。这个对象是静态的，不会发生变化。例如：

```
const obj = {
  name: 'Alice',
  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
};

obj.sayHello(); // 输出 "Hello, Alice!"

const sayHello = obj.sayHello;
sayHello(); // 输出 "Hello, undefined!"
```

在这个例子中，obj.sayHello 是一个普通的函数，它的 this 关键字指向的是 obj 对象。因此，调用 obj.sayHello() 时输出的是 "Hello, Alice!"。但是，当将 obj.sayHello 赋值给变量 sayHello 并调用 sayHello() 时，输出的却是 "Hello, undefined!"。这是因为在调用 sayHello() 时，它的 this 关键字指向的是全局对象，而不是 obj 对象。在 ES6 箭头函数中，这个问题可以被简单地解决：

```
const obj = {
  name: 'Alice',
  sayHello: () => {
    console.log(`Hello, ${this.name}!`);
  }
};

obj.sayHello(); // 输出 "Hello, undefined!"
```

在这个例子中，`obj.sayHello的定义方式被改为了箭头函数的形式。箭头函数的 this 关键字指向的是函数定义时所在的对象，也就是全局对象，因此输出的是 "Hello, undefined!"。这个例子说明了在箭头函数中，this 关键字的绑定更加直观、简单，不需要使用bind、call、apply` 等方法来手动绑定 this 关键字。

**2.2 箭头函数的简洁语法**
ES6 箭头函数的语法更加简洁，不需要使用 function 关键字来定义函数，也不需要使用花括号和 return 关键字来定义函数体。例如，下面是一个使用传统函数定义方式的例子：

```
const sum = function(a, b) {
  return a + b;
};
```

使用箭头函数的形式可以更加简洁：

```
const sum = (a, b) => a + b;
```

在这个例子中，箭头函数的函数体只有一条语句，因此可以省略花括号和 return 关键字。这种简洁的语法使得箭头函数在编写一些简单的回调函数、数组方法等场景下更加方便。

**2.3 箭头函数的参数处理**
在传统的函数定义方式中，函数的参数处理比较繁琐，需要使用 arguments 对象来获取函数的所有参数，或者使用默认参数来处理一些缺省情况。在 ES6 箭头函数中，参数处理变得更加简单、直观。例如：

```
const print = (a, b, ...rest) => {
  console.log(a); // 输出 1
  console.log(b); // 输出 2
  console.log(rest); // 输出 [3, 4, 5]
};

print(1, 2, 3, 4, 5);
```

在这个例子中，箭头函数的参数列表中使用了扩展语法 ...rest，它可以将传递给函数的多余参数打包成一个数组。这种语法非常方便，在处理一些不确定参数个数的函数时特别有用。

**2.4 箭头函数的作用域**
在传统的函数定义方式中，函数的作用域是静态的，即函数内部声明的变量只能在函数内部访问。在 ES6 箭头函数中，函数的作用域也是静态的，但是它可以访问外层函数的 this 关键字和变量。例如：

```
const obj = {
  name: 'Alice',
  sayHello() {
    const sayName = () => {
      console.log(`My name is ${this.name}`);
    };
    sayName();
  }
};

obj.sayHello(); // 输出 "My name is Alice"
```

在这个例子中，sayName 函数是一个箭头函数，它可以访问外层函数 sayHello 的 this 关键字，因此输出了正确的结果。如果将 sayName 函数改为传统的函数定义方式，就需要使用 bind、call、apply 等方法来手动绑定 this 关键字：

```
const obj = {
  name: 'Alice',
  sayHello() {
    const sayName = function() {
      console.log(`My name is ${this.name}`);
    };
    sayName.call(this);
  }
};

obj.sayHello(); // 输出 "My name is Alice"
```

这种方式比较麻烦，而且容易出错。使用箭头函数可以更加简洁、直观地实现这个功能。

**2.5 箭头函数的注意事项**
虽然 ES6 箭头函数在很多方面都比传统的函数定义方式更加方便、简洁，但是在某些情况下需要注意一些细节。例如：

- 箭头函数不能用作构造函数。因为箭头函数没有自己的 this 关键字，不能使用 new 关键字来创建对象。如果使用 new 关键字调用箭头函数，会抛出一个 TypeError 异常。

- 箭头函数没有 arguments 对象。传统的函数定义方式中可以使用 arguments 对象来获取函数的所有参数，但是在箭头函数中不支持这个特性。如果需要获取函数的所有参数，可以使用扩展语法 ...args 来获取多余的参数。

- 箭头函数不能作为对象的方法。因为箭头函数没有自己的 this 关键字，它的 this 关键字会指向函数定义时所在的对象，而不是调用时所在的对象。如果将箭头函数用作对象的方法，this 关键字会指向全局对象，这可能会导致程序出现不可预期的结果。

- 箭头函数的函数体只能包含一条语句，否则需要使用花括号和 return 关键字来定义函数体。如果箭头函数的函数体包含多条语句，需要使用传统的函数定义方式。

**小结**
ES6 箭头函数是一种更加简洁、直观的函数定义方式，它可以帮助我们更加方便地编写一些简单的回调函数、数组方法等。在箭头函数中，this 关键字的绑定更加直观、简单，不需要使用 bind、call、apply 等方法来手动绑定 this 关键字。同时，箭头函数的参数处理也更加方便，可以使用扩展语法来处理不确定参数个数的函数。不过，在使用箭头函数时也需要注意一些细节，比如箭头函数不能用作构造函数，不能作为对象的方法等。掌握好箭头函数的语法和注意事项，可以帮助我们更加高效地编写 JavaScript 代码。

该分类下的相关小册推荐：

编程入门课：Javascript从入门到实战

javascript设计模式原理与实战

web前端开发性能优化实战

Flutter核心技术与实战

Javascript编程指南

剑指javascript

零基础学JavaScript

JavaScript入门与进阶

Javascript-ES6与异步编程

剑指javascript-ES6

Javascript重点难点实例精讲（一）

KnockoutJS入门指南