详解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中的箭头函数能有所帮助。如果有疑问可以留言讨论。