ES6----箭头函数

1、基本用法

在ES6中允许使用箭头()=>来定义函数。

var f = v => v;
//等同于
var f = function(v) {
  return v;
};

如果函数不需要参数或者需要多个参数就使用圆括号来代替。

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

箭头函数可以与解构赋值同时使用。

const full = ({ first, last }) => first + ' ' + last;

// 等同于
function full(person) {
  return person.first + ' ' + person.last;
}

箭头函数可以简化函数代码，尤其是回调函数的简化。

// 正常函数写法
[1,2,3].map(function (x) {
  return x * x;
});

// 箭头函数写法
[1,2,3].map(x => x * x);

2、使用时注意事项

1）函数中的this是定义函数时的this，而不是使用函数时的this，也就是说箭头函数中的this是固定的。

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

var id = 21;

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

上面的例子中，使用了箭头函数，this指向foo而不是window。
根据这一特性我们可以用来封装回调函数。
2）不可以当作构造函数，也就是说，不可以使用new命令，否则会报错。由于箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。
箭头函数可以绑定this对象，大大减少了显式绑定this对象的写法（call、apply、bind）。但是，箭头函数并不适用于所有场合，所以ES7提出了“函数绑定”（function bind）运算符，用来取代call、apply、bind调用。虽然该语法还是ES7的一个提案，但是Babel转码器已经支持。函数绑定运算符是并排的两个冒号（::），双冒号左边是一个对象，右边是一个函数。该运算符会自动将左边的对象，作为上下文环境（即this对象），绑定到右边的函数上面。