ES6中的箭头函数实例详解
本文实例讲述了ES6中的箭头函数。分享给大家供大家参考，具体如下：
语法
我们先来看看箭头函数的语法：
([param][,param])=>{
statements
}
param=>expression
param是参数，根据参数个数不同，分这几种情况：
()=>{…}//零个参数用()表示；
x=>{…}//一个参数可以省略()；
(x,y)=>{…}//多参数不能省略()；
示例
我们再来看看一些示例，看看在ES5中的函数怎么通过ES6中的箭头函数来替代吧：
//ES5
varselected=allJobs.filter(function(job){
returnjob.isSelected();
});
//ES6
varselected=allJobs.filter(job=>job.isSelected());
当然，也可以定义多个参数：
//ES5
vartotal=values.reduce(function(a,b){
returna+b;
},0);
//ES6
vartotal=values.reduce((a,b)=>a+b,0);
当然=>后面也不一定非得接return之后的语句，看下面：
//ES5
$("#confetti-btn").click(function(event){
playTrumpet();
fireConfettiCannon();
});
//ES6
$("#confetti-btn").click(event=>{
playTrumpet();
fireConfettiCannon();
});
但是需要注意的是，多行语句需要用{}括起来，单行表达式不需要{}，并且会作为函数返回值。
x=>{returnx*x};//函数返回x*x
x=>x*x;//同上一行
x=>returnx*x;//SyntaxError报错，不能省略{}
x=>{x*x};//合法，没有定义返回值，返回undefined
和普通函数一样，箭头函数也可以使用剩余参数和默认参数。
varfunc1=(x=1,y=2)=>x+y;
func1();//得到3
varfunc2=(x,...args)=>{console.log(args)};
func2(1,2,3);//输出[2,3]
特性
介绍完了箭头表达式的语法和示例，我们就需要思考一下了。如果箭头表达式仅仅就是简化了函数的命名，我们为什么要改变原来的习惯而去使用它呢？所以我们需要了解一下箭头函数的特性。
箭头函数内部没有constructor方法，也没有prototype，所以不支持new操作。但是它对this的处理与一般的普通函数不一样。箭头函数的this始终指向函数定义时的this，而非执行时。我们通过一个例子来理解:
varo={
x:1,
func:function(){console.log(this.x)},
test:function(){
setTimeout(function(){
this.func();
},100);
}
};
o.test();//TypeError:this.funcisnotafunction
上面的代码会出现错误，因为this的指向从o变为了全局（函数调用中的this都是指向全局的）。如果大家对JavaScript中的this不是很熟悉的话，可以看看前面的一篇文章《javascript中this的用法实例详解》。好了，回归正题，我们需要修改上面的代码如下：
varo={
x:1,
func:function(){console.log(this.x)},
test:function(){
var_this=this;
setTimeout(function(){
_this.func();
},100);
}
};
o.test();
通过使用外部事先保存的this就行了。这里就可以利用到箭头函数了，我们刚才说过，箭头函数的this始终指向函数定义时的this，而非执行时。所以我们将上面的代码修改如下：
varo={
x:1,
func:function(){console.log(this.x)},
test:function(){
setTimeout(()=>{this.func()},100);
}
};
o.test();
这回this就指向o了。
我们还需要注意一点的就是这个this是不会改变指向对象的，我们知道call和apply可以改变this的指向，但是在箭头函数中是无效的。
varx=1,
o={
x:10,
test:()=>this.x
};
o.test();//1
o.test.call(o);//依然是1
希望本文所述对大家ECMAScript程序设计有所帮助。