JavaScript 箭头函数

ES6 允许使用“箭头”（=>）定义函数。箭头函数可以说是ES6的一大亮点，使用箭头函数，可以简化编码过程，是代码更加的简洁。

var f = a => a;
 
var f = function (a) {
  return a;
};

上面两个是同一个函数，实现功能都是返回a。可以看到使用箭头函数后代码简洁了很多。如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

var f = () => 5;

等同于:

var f = function () { return 5 };

再如：

var sum = (num1, num2) => num1 + num2;

等同于：

var sum = function(num1, num2) {
  return num1 + num2;
};

如果箭头函数的代码块大于一行，需要用大括号包起来使用。

var sum = (num1, num2) => { num1 = num1+1; return num1 + num2; } 
sum(1,1)

大括号{}内容会被解释成代码块，所以如果返回的是对象，需要在外面加上一个括号，否则就会报错。

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

如果代码只有一行且不需要返回，可以使用void，这样就不用大括号了。

let fn = () => void doesNotReturn();

使用箭头函数，可以让我们的回调函数特别的简洁。

// 正常函数写法
[1,2,3].map(function (x) {
  return x + x;
});
 
// 箭头函数写法
[1,2,3].map(x => x + x);

剪头函数在使用时，this的指向会发生变化。在我们使用普通函数的时候：

function foo() {
  setTimeout(function(){
    console.log('id:', this.id);
  }, 100);
}
 
var id = 1;
 
foo.call({ id: 2 });

这个时候console打印的id是全局的id也就是1。但是，如果使用箭头函数：

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

这个时候就是2了，这是因为箭头函数的定义生效在函数生成时，也就是指向了{id:2}所以最后打印的是2。