简单易用的箭头函数之ES6篇

习惯了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"关注,有问题的也可以点关注并留言。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180602G00T4L00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券