函数的扩展
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就会动态指向被点击的按钮对象
另外，如果函数体很复杂，有许多行。或者函数内部有大量的读写操作，不单纯是为了计算值，这时也不应该使用箭头函数，而是使用普通函数，这样可以提高代码可读性
嵌套的箭头函数
箭头函数内部还可以再使用箭头函数
