ES6 箭头函数
//ES5下的函数
const f1=function(number){
return number*2;
};
console.log(f1(2));
//ES6 箭头函数,应用1:简化代码
//单个参数时 1
const f2=number=>{
return number*2;
}
console.log(f2(2));
//单个参数 2
const f3=(number)=>number*2;
console.log(f3(2));
//单个参数 3
const f4=number=>number*2;
console.log(f4(2));
//以上不断简化的形式,实现同样的功能
//多个参数,需要加上括号。如果执行单条语句可不需要‘{}’和return
const f5=(number1,number2)=>number1+number2;
console.log(f5(2,2));
//多个参数,需要加上括号。如果执行多条语句需要‘{}’和return
const f6=(number1,number2)=>{
sum=number1+number2;
return sum;
}
console.log(f6(2,2));
//ES6 箭头函数,应用2:改变this指向
const team={
members:['Tom','Earry'],
teamName:'ES6',
teamSummary:function(){
return this.members.map(member=>{
//箭头函数改变了this的中指向,这里的return后面采用的是ES6的模板字符串
return `${member}隶属于${this.teamName}`;
})
}
};
console.log(team.teamSummary());//打印: ["Tom隶属于ES6", "Earry隶属于ES6"]
//而在ES5 中:
const team1={
members:['Tom','Earry'],
teamName:'ES6',
teamSummary:function(){
return this.members.map(function(member){
return `${member}隶属于${this.teamName}`;
})
}
};
console.log(team1.teamSummary()); //打印:["Tom隶属于undefined", "Earry隶属于undefined"]
//因为在map的迭代函数中,外层的this指向已经发生改变,这时可通过 _this=this再在map函数中使用,也可以在map方法后直接再调用
bind(this)绑定this来解决。