JavaScript中的箭头函数详解

什么是箭头函数？

ES6标准新增了一种新的函数：Arrow Function（箭头函数）。箭头函数相当于匿名函数，并且简化了函数定义。
箭头函数的语法

(parameters) => { statements }

举一个常规的例子

// 使用常规语法定义函数
function funcName(params) {
   return params * 3;
 }
funcName(1);
// 3

// 使用箭头函数定义函数
var funcName = (params) => params * 3
funcName(1);
// 3

可以清晰得看到，只须一行代码就可以搞定一个函数，简化了函数定义，书写匿名函数的时候更加方便，在代码书写过程中多处可以使用到箭头函数。

语法解析

// 通用语法
(parameters) => { statements }
// 只有一个参数时，可以省略小括号
parameters => { statements }
// 没有参数时，简化为
() => {statements }
// 返回值只有一个表达式时，可以省略大括号
parameters => expression

//特殊例子，返回带有大括号的单表达式
x => { foo: x }  // error
x => ({ foo: x }) // 加上小括号，ok

没有局部this的绑定

和一般的函数不同，箭头函数不会绑定this。 或则说箭头函数不会改变this本来的绑定。
下面举个例子

function Counter() {
  this.num = 0;
  this.timer = setInterval(function add() {
    this.num++;
    console.log(this.num);
  }, 1000);
}

var b = new Counter();
// NaN
// NaN
// NaN
// ...

上述代码是使用常规函数定义，setInterval是一个普通函数，而且没有bind、call、apply等，所以内部的this指向的是全局this，全局this没有num这个属性，从而这边输出的都是NaN。要解决这个问题有多种方法，可以先将Counter函数的this用一个参数保存起来，在setInterval函数内部调用这个参数；也可以为setInterval绑定一个this，通过bind实现。在这边，我们考虑使用箭头函数来解决这个问题，看看下面的代码：

function Counter() {
  this.num = 0;
  this.timer = setInterval(() => {
    this.num++;
    console.log(this.num);
  }, 1000);
}

var b = new Counter();
// 1
// 2
// 3
// ...

因为箭头函数不会改变this本来的绑定，所以在上述代码中通过Counter构造函数绑定的this将会被保留。在setInterval函数中，this依然指向我们新创建的b对象。

通过上述的描述，我们可以知道箭头函数没有局部this的绑定，所以我们使用箭头函数来实现React的事件处理。参考：《React事件处理》

总结

箭头函数有两个突出的优点：

• 语法简单，简化函数定义
• 不会改变this的绑定