简单易用的箭头函数之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"关注，有问题的也可以点关注并留言。