《ES6学习3》 箭头函数

1 基本用法

ES6新增了箭头函数，简化了函数声明过程。

var f = value => value;
//等同于下面函数
var f = function (value) {
  return value;
};

如果不需要要参数或者多个参数，使用圆括号代表参数部分。如果箭头函数的代码块部分多于一条语句，需要使用大括号，并使用return返回。如果直接返回一个对象，必须在对象外面加括号。

var f = {} => 1;
var sum = (num1, num2) => { 
  return num1 + num2;
};
//直接返回一个对象
var getName = name => ({ name: 'jack' });

箭头函数可以与变量解构结合使用。

let person = ({ name, age }) => name + '今年' + age;
let obj = { name: '小王', age: 25 };
person(obj); // "小王今年25"

箭头函数可以使得表达更加简洁。

let arr = [1, 3, 4, 2, 5];
var result = value => value.sort((a, b) => a - b);
result(arr); // [1, 2, 3, 4, 5]

2 this指向

箭头函数的this指向定义时所在对象，而不是使用时所在的对象。因此，在箭头函数中this对象的指向是固定的。

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

var id = 35;

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

上面代码中，setTimeout的参数是一个箭头函数，这个箭头函数的定义在foo函数生成时才生效，而它真正执行要等到100ms后，如果是普通函数，执行时this指向全局对象window，这时应该输出35。但是箭头函数的this总是指向函数定义生效时所在的对象（本例是{id：42}），所以最后输出42。

箭头函数的this指向固化，实际原因是箭头函数根本没有自己的this，所以箭头函数内的this就是外层代码块的this。需要注意一点，因为没有this，所以不能用作构造函数,也不能使用call()、apply()、bind()这些方法改变this指向。

function foo() {
  setTimeout(() => {
    console.log('id', this.id);
  }, 100);
}
//等同于ES5版本
function foo() {
  var _this = this;
  
  setTimeout((function () {
    console.log('id', _this.id);
  }, 100);
}

上面的代码中，转换后ES5版本清楚的说明了箭头函数里面根本没有自己的this，而是调用外层的this。

3 箭头函数的嵌套

箭头函数内部还可以再使用箭头函数。

let insert = (value) => ({into: (array) => ({after: (afterValue) => {
  array.splice(array.indexOf(afterValue) + 1, 0, value);
  return array;
}})});

insert(2).into([1, 3]).after(1); // [1, 2, 3]

ps ...参考资料《ES6标准入门》（第三版）