箭头函数的产生有两个目的:更简洁的语法和父作用域共享关键字this
箭头函数基本用法
ES6中新增的=>来定义简单函数
如:
x=>x+1
相当于
function(x){
return x+1;
}
如果没有参数或者多个参数,需要使用()
(a,b)=>a+b
相当于
(a,b)=>{
return a+b;
}
var log= () =>{
alert('no param')
}
当需要编写一个简单的参数函数时,可以采用箭头函数来书写,标识名=>表达式。这样省略function和return的输入,还有括号,分号等。
//es6
var total = values.reduce((a,b) => a + b,0);
//es5
var total = value.reduce(function (a,b){
return a+b;
},0;
除了函数样式编写,箭头函数还可以包含区域块语句而不仅仅是单一表达式:
//es5
$("#a-btn").click(function (event){
playTrumpet();
fireConfettiCanno();
});
//es6
$("#a-btn").click(event => {
playTrumpet();
fireConfettiCanno();
});
箭头函数中的this
箭头函数没有自己的this值,其this值是通过继承其他传入对象而获得的。
JS中处理this:
{
···
addAll: function addAll(pieces){
var self=this;
_.ech(pieces,function(piece){
self.add(piece);
});
},
···
}
ES6中this
遵循以下原则
1.使用非箭头函数处理object.methos()语法调用的方法。因为他们会接受到来自调用者的有意义的this值
2.在其他场合都使用箭头函数
{
...
addAll: function addAll(pieces) {
_.each(pieces, piece => this.add(piece));
},
...
}