箭头函数 - 悦读

箭头函数可以说是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)
//3

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

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

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

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

// 正常函数写法
[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 = 21;

foo.call({ id: 42 });

这个时候console打印的id是全局的id也就是21。

但是如果使用箭头函数

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

var id = 21;

foo.call({ id: 42 });

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

因为这个特性，箭头函数包含this的自定义对象方法中使用。

const dog= {
  age: 9,
  ages: () => {
    this.age--;
  }
}

当我们调用dog.ages的时候会报错，这是因为对象不单独构成作用域，箭头函数的this指向的是作用域是全局的。

还有就是动态的this也是不可以使用箭头函数的。比如当监听点击事件的时候，使用this处理点击对象，如果使用箭头函数就会报错，因为this指向的是全局对象了。