ES6中,箭头函数算是一个比较突出的特性,使用这么久了,做个小短的总结如下,有不对还请不吝指出。
1,与传统函数的区别
这个从外观来看,比较直观的是少了function,多了=>
传统函数:
function test(a,b){
return a+b;
}
箭头函数:
(a,b)=>{
return a+b;
}
或者
const test = (a,b)=>{
return a+b;
}
2,细节处理
当传入一个参数时,可去掉外面的括号,没有参数时括号不能省掉
a=>{ return a+b }
当函数体里面只有一句返回语句时,可省略return
(a,b)=>a+b
当函数体里面只有一句返回语句,但是一个object对象时,要用()把Object对象包起来,箭头函数会把{}看作一个代码块,直接返回会报错
传统函数:
function test(a,b){
return {
a:a,
b:b
}
}
箭头函数:
(a,b)=>({a,b})
3,this属性
箭头函数没有this,在箭头函数里面的this都是指代父级this,如果父级还是箭头函数,那就继续上一级,直到找到非箭头函数的this,
也因为没有this,箭头函数不能用作构造函数,不能用来new
function test(){
setTimeout(()=>{
console.log(this.num);
},1000)
}
test.call({num:1});//1
上面这个函数,定时器里面不用箭头函数时,this对象是指代window对象,控制台会打印undefined
但是用做箭头函数时,this指向test,打印test的num属性