ES6箭头函数

一、基本用法

  ES6中允许使用”箭头“(=>)定义函数：var f = (形参)=>{函数体}
  ①当函数体只有一行时：       var f = (a,b)=>a+b; 方括号可以省略
  ②当箭头函数直接返回一个对象： var f = id =>({id:id,name:'arrow'}); 用圆括号括起来
  ③可与变量结构结合使用：       var f = (first,last)=>first + ' ' + last;
  等同于function f(person){return person.first + ' ' + person.last};

二、注意事项

2.1 函数体内的this对象就是定义时所在的对象，而不是调用时所在的对象

  这里有点小拗口，我们通过一个案例进行说明:

    function Timer() { //注意这是一个构造函数
        this.s1 = 0;
        this.s2 = 0;
        //箭头函数
        setInterval(() => this.s1++, 1000);
        //普通函数
        setInterval(function () {
            this.s2++;
        }, 1000);
    }
    var s2 = 100; //声明一个全局s2变量
    var time = new Timer(); //实例化一个time
    setTimeout(() => console.log('s1:', time.s1), 3200);
    setTimeout(() => console.log('s2:', time.s2), 3200);
    setTimeout(() => console.log('全局s2:', s2), 3200);

执行结果

  上面代码中，我们不难看出箭头函数的this.s1指向的是Time实例化对象time.s1，实例化一开始就指定了。而普通函数中的this是setInterval的调用--window，所以此时this.s2指向的是全局变量s2。因此在最后的执行结果中，time.s1和全局s2更新了3次，time.s2没有更新。

2.2 不可当作构造函数，故不能使用new命令，否则会报错

  箭头函数表达式对非方法函数是最合适的。但它不用当作构造函数使用，同时也要注意它作为对象方法时会发生什么。

    var f = {
        cal: function(){
            console.log(this);
        },
        cal2:()=>console.log(this)
    }
    f.cal();
    f.cal2();

箭头函数作为对象的方法

  从结果中我们可以看到，普通函数中的this是对象本身，而同样作为方法的箭头函数中，由于没有绑定this指向，所以指向的是window对象。

2.3 不可使用arguments对象，该对象在箭头函数中不存在，但可以使用rest参数

2.4 不可使用yield命令，因此箭头函数不能作为Generator函数