详解Javascript ES6中的箭头函数(Arrow Functions)
ES6可以使用“箭头”(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器)。
一、语法
1.具有一个参数的简单函数
varsingle=a=>a
single('hello,world')//'hello,world'
2.没有参数的需要用在箭头前加上小括号
varlog=()=>{
alert('noparam')
}
3.多个参数需要用到小括号,参数间逗号间隔,例如两个数字相加
varadd=(a,b)=>a+b add(3,8)//11
4.函数体多条语句需要用到大括号
varadd=(a,b)=>{
if(typeofa=='number'&&typeofb=='number'){
returna+b
}else{
return0
}
}
5.返回对象时需要用小括号包起来,因为大括号被占用解释为代码块了
vargetHash=arr=>{
//...
return({
name:'Jack',
age:33
})
}
6.直接作为事件handler
document.addEventListener('click',ev=>{
console.log(ev)
})
7.作为数组排序回调
vararr=[1,9,2,4,3,8].sort((a,b)=>{
if(a-b>0){
return1
}else{
return-1
}
})
arr//[1,2,3,4,8,9]
二、注意点
1.typeof运算符和普通的function一样
varfunc=a=>a console.log(typeoffunc);//"function"
2.instanceof也返回true,表明也是Function的实例
console.log(funcinstanceofFunction);//true
3.this固定,不再善变
obj={
data:['JohnBackus','JohnHopcroft'],
init:function(){
document.onclick=ev=>{
alert(this.data)//['JohnBackus','JohnHopcroft']
}
//非箭头函数
//document.onclick=function(ev){
//alert(this.data)//undefined
//}
}
}
obj.init()
这个很有用,再不用写me,self,_this了,或者bind。
4.箭头函数不能用new
varPerson=(name,age)=>{
this.name=name
this.age=age
}
varp=newFunc('John',33)//error
5.不能使用argument
varfunc=()=>{
console.log(arguments)
}
func(55)//
对于5,在Firefox36里测试是可以输出55的,貌似并没有这个限制
三、总结
以上就是关于ES6中箭头函数的全部介绍内容,希望对大家了ES6中的箭头函数能有所帮助。如果有疑问可以留言讨论。