箭头函数-ES6初学习

2017-02-08  本文已影响0人  程咸菜

箭头函数,就是对函数进行简化操作,基本写法

=>

=> 就是当你只需要一个只有一个参数的简单函数时,可以使用新标准中的箭头函数,它的语法非常简单:标识符=>表达式。你无需输入function和return,一些小括号、大括号以及分号也可以省略。

function show(x){           
    console.log(x)          
};                
show(4);            
var fun = y => y;      
console.log(fun(5));    

() 多参数的处理

如果要写一个接受多重参数(也可能没有参数,或者是不定参数、默认参数、参数解构)的函数,你需要用小括号包裹参数 list
一个参数的情况下你可以不用小括号 var fun = y => y; 这样直接写,两个参数或者有更多的参数的时候就必要用小括号把参数包裹进去。

var fun = (x,y)=> x+y;       
console.log(fun(7,9));           

{} 函数体多内容的处理

复杂一些就好比这样

var fun = (x,y)=>{       
    x=x*y;      
    y=y*x;    
    return x+y;       
};      
console.log(fun(7,9));       

这时我们需要把复杂的计算过程写到大括号里,如果不写大括号就意味着直接就是写入 return 了,所以需要写入到大括号里。

回调写法

回调函数,匿名函数也是可以用箭头函数来写的。

setTimeout(()=>{      
    console.log(123);      
},1000);         

怎么说呢,箭头函数也可以这样理解就是把函数中的 function 给省略了。

注意点

箭头函数我们还需要注意一些细节。

this 指向的问题

在函数中 this 指向是很容易搞混淆的。我们在做面向对象,事件的时候,会弄混的。这个 this 指向的问题我单独开一个新的文章来写。

不可以当做构造函数

这里有这样的一个构造函数

var  A = function(){          
    this.a=10;          
};          
var A1 = new A();          
console.log(A1.a);     

这是一个简单的构造函数,这时候如果用 => 来代替了 function 以后会出现什么情况
var  A = () =>{          
    this.a=10;          
};          
var A1 = new A();          
console.log(A1.a);      

可以看出箭头函数是不可以做构造函数的。

不可以使用 arguments

形式参数 arguments 是不能在箭头函数中使用的

var fun = function(){           
    console.log(arguments[4]+arguments[3]);           
};           
fun(1,2,3,4,5);           

但是如果用 箭头函数就会报错
var fun = ()=>{           
    console.log(arguments[4]+arguments[3]);           
};           
fun(1,2,3,4,5);    

Uncaught ReferenceError: arguments is not defined 说没有找到,没有定义。

不可以用在 Generator 函数中。

Generator 这个函数就是生成器,是为了解决异步操作。这个点也是比较多,我们单独写一个博客。
以上的四点是需要注意的地方。

上一篇 下一篇

猜你喜欢

热点阅读