认清ECMAScript6——箭头函数

前言

ES6出现了函数的新的定义形式——箭头函数，这种函数的定义方式，十分具有表现力，让输入、输出一目了然，也深得开发者的喜爱。

一、箭头函数如何使用

var f = v => v;

这种定义方式等价于：

var f = function(v) {
  return v;
};

是不是很简洁方便？在自己写箭头函数时在书写格式上有以下几点需要注意：

当入参不只1个时，需要用()括起来；

当没有入参时，要用()表示；

箭头函数的函数体多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

如果箭头函数直接返回一个对象，必须在对象外面加上()，否则会报错。

下面给出4个范例依次说明：

var fun = (x,y) => x + y;
fun(1,4)//5

var say = () => console.log('hello')

var area = (a,b,h) => {
var l = (a+b)/2;
return h*l
 } 
s = area(4,8,5)//30

let getTempItem = id => ({ id: id, name: "Temp" })

二、箭头函数的优点

可以让函数表达更加简洁，一目了然。
看看下面几个例子：

const isEven = n => n % 2 == 0;
const square = n => n * n;

仅仅使用一行就创建了一个“小工具”

简化回调函数

// 正常函数写法
var result = values.sort(function (a, b) {
  return a - b;
});

// 箭头函数写法
var result = values.sort((a, b) => a - b);

箭头函数可以让this指向固定化，这种特性很有利于封装回调函数。后面我们会详细介绍它的this的特性。

三、箭头函数应该注意的几个点

箭头函数的this会继承箭头函数的定义完成处的上下文的this，也就是它定义处外层的this，且它是固定的。
什么叫继承函数外层的this？来看几个例子：

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 }); //42

这里需要注意的是，箭头函数只是作为setTimeout()的入参，并不是在setTimeout()内部完成定义的，它完成定义的上下文(context)是函数foo的作用域，如果是普通函数，执行时this应该指向全局对象window，应该输出21。但是，箭头函数导致this总是指向函数定义生效的上下文的this（本例是{id: 42}），所以输出的是42。
对比下不使用箭头函数：

function foo() {
  setTimeout(function(){
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 }); //21

这里的this由函数调用的位置决定，是在setTimeout()内部回调，所以是作为函数单独调用，在浏览器中即指向全局变量window。

再看一个例子：

function Timer() {
  this.s1 = 0;
  this.s2 = 0;
  // 箭头函数
  setInterval(() => this.s1++, 1000);
  // 普通函数
  setInterval(function () {
    this.s2++;
  }, 1000);
}

var timer = new Timer();

setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);

和上面一样，第一个箭头函数中的this继承构造函数Timer的this即指向实例timer，所以timer的s1会自加；而第二个this指向全局变量，不会改变timer的s2。

再看看上面提到的函数封装中的用法：

var handler = {
  id: '123456',

  init: function() {
    document.addEventListener('click',
      event => this.doSomething(event.type), false);//注意这一行
  },

  doSomething: function(type) {
    console.log('Handling ' + type  + ' for ' + this.id);
  }
};

里面直接使用了

this.doSomething(event.type), false)

因为箭头函数的this间接继承了构造函数的this，所以可以通过this使用构造函数的方法。

箭头函数不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用rest 参数（形式为...变量名）代替。

var add = (...nums) => {
let  sum = 0;
for(let i = 0; i < nums.length; i++){
 sum += nums[i]
}
return sum
}

不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

在这4条注意点中，第一条是最重要的，也是花大量篇幅介绍的，希望各位在使用时可以注意。

本文到此结束，更多参考：阮一峰ESMAScript6入门

认清ECMAScript6——箭头函数

前言

一、 箭头函数如何使用

二、箭头函数的优点

三、箭头函数应该注意的几个点

推荐阅读更多精彩内容

一、箭头函数如何使用