箭头函数初学

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属性

猜你喜欢

转载自www.cnblogs.com/lr-blog/p/9399993.html