习惯了ES5特性的小伙伴,一头冲进ES6的世界可能有点不习惯。但是,今天的这个箭头函数可是简单的一匹啊,妈妈再也不用担心我的函数很长啦~
首先先简单介绍一下基本的用法
varc=x=>x;
console.log(c(3));// 3
等同于下面这几段代码:
varc=function(c){
returnc;
}
console.log(c(3));// 3
returnx;
}
console.log(c(3));// 3
varc= (x)=>{
returnx;
}
console.log(c(3));// 3
传入多个参数:
varc= (x,y)=>x+y;
console.log(c(3,4));// 7
varc= (x,y)=>{
returnx+y;
}
console.log(c(3,4));// 7
还可以传入数组:
varc= (...array)=>array;
console.log(c([1,2,3,4,5]));// [1,2,3,4,5]
返回箭头函数:
varc= ()=>{
return()=>3;
}
console.log(c()());// 3
是不是感觉分方便,只需要把箭头左边的看成函数的参数,函数的右边看成函数体,就能很快上手箭头函数啦!
不过要注意的一点是:箭头函数为匿名函数的简化版(非严格模式下,匿名函数的this是指向全局对象window的),那么函数中的this是指向全局对象window的。下面看个例子:
varAnimal= {
action1:()=>this,
action2:function(){
returnthis;
},
action3:function(){
returnfunction(){
returnthis;
}
}
}
console.log(Animal.action1());// window
console.log(Animal.action2());// Animal
console.log(Animal.action3()());// window
再看一下另外一个奇怪的现象:
varAnimal= {
action1:function(){
setTimeout(()=>{
console.log(this);
},);
},
action2:function(){
setTimeout(function() {
console.log(this);
},);
}
}
Animal.action1();// Animal
Animal.action2();// window
setTimeout中的箭头函数,其中的this是指向其所在的作用域的对象,而不都是全局对象window了。而匿名函数依旧指向全局对象,这点是毋庸置疑的。
箭头函数就介绍到这里,当然还有很多其他的用法。虽说简单,但懂得使用箭头函数,便能大大提高项目开发的效率。喜欢的小伙伴们可以点一下左上角"Miku灬Rua"关注,有问题的也可以点关注并留言。
领取专属 10元无门槛券
私享最新 技术干货