函数的扩展

2、箭头函数

使用注意点

箭头函数有几个注意点：
1、函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象 （尤其要注意：this对象的指向是可变的，但是在箭头函数中，它是固定的）
2、不可以当做构造函数，也就是说，不可以使用new命令，否则会抛出一个错误
3、不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用rest参数代替
4、不可以使用yield命令，因此箭头函数不能用作Generator函数

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

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

如果是普通函数，执行时this应该指向全局对象window，这时应该输出21
但是箭头函数导致this总是指向函数定义生效时所在的对象（本例是{id：42}）

箭头函数可以让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  s1使用的是箭头函数，this绑定定义时所在的作用域（即Timer函数）
//s2:0 s2使用的是普通函数，this指向运行时所在的作用域（即全局对象
//所以3100毫秒之后，thimer.s1被更新了3次，而timer.s2一次都没更新。
）

箭头函数可以让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);
    }
};

上面代码的init方法中，使用了箭头函数，这导致了这个箭头函数里面的this，总是指向handler对象。否则回调函数执行时，this.doSomething这一行会报错，因为此时this指向document对象

this指向的固定化，并不是因为箭头函数内部又绑定this的机制，实际原因是函数根本没有自己的this，导致内部的this就是外层代码块的this。正式因为它没有this，所以也就不能用作构造函数。

所以，箭头函数转换成ES5的代码如下：

//ES6
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

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

var f=foo.call({id:1});

var t1 = f.call({id:2})()(); //id:1
var t2 = f().call({id:3})(); //id:1
var t3 = f()().call({id:4}); //id:1
//上面代码中只有一个函数foo的this，因为所有的内层函数都是箭头函数，都没有自己的this，它们的this其实都是最外层foo函数的this，所以输出的结果都是相同的。

箭头函数没有自己的this，所以也就不能用call（）、apply（）、bind（）这些方法去改变this的指向

不适用场合

由于箭头函数使得this从“动态”变成“静态”，所以以下两种场合不应该使用箭头函数：

第一种场合：是定义函数的方法，且该方法内部包含this

const cat = {
    lives:9,
    jumps:() => {
        this.lives--;
    }
}//错误
//调用cat.jumps（）方法时，如果是普通函数，该方法内部的this指向cat
//如果像上面的箭头函数，使得this指向全局对象，会得不到预期结果

第二个场合是需要动态this的时候，也不应该使用箭头函数

var button = document.getElementById('press');
button.addEventListener('click',() =>{
    this.classList.toggle('on');
})//报错
//因为button的监听函数是一个箭头函数，导致里面的this就是全局对象。
//如果改成普通函数，this就会动态指向被点击的按钮对象

另外，如果函数体很复杂，有许多行。或者函数内部有大量的读写操作，不单纯是为了计算值，这时也不应该使用箭头函数，而是使用普通函数，这样可以提高代码可读性