Es6 箭头函数

转换

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

箭头函数有几个使用注意点。

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

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

上面四点中，第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的。

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

  var id = 21;

 foo.call({ id: 42 });

例子2
箭头函数可以让setTimeout里面的this，绑定定义时所在的作用域，而不是指向运行时所在的作用域。下面是另一个例子。

 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);
 // s1: 3
 // s2: 0

例子3
箭头函数可以让this指向固定化，这种特性很有利于封装回调函数。下面是一个例子，DOM 事件的回调函数封装在一个对象里面。

       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);
  }
};

例子4
嵌套的箭头函数
箭头函数内部，还可以再使用箭头函数。下面是一个 ES5 语法的多重嵌套函数。

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

 insert(2).into([1, 3]).after(1); //[1, 2, 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]


// id: 42

Es6 箭头函数

转换

推荐阅读更多精彩内容