es6箭头函数this指向及优缺点

前言

箭头函数是es6新特性,和普通函数没有太大区别,说白了就是匿名函数的简写

举例

 普通函数
  let fn1 = function(name){
      console.log('我的名字是'+name);
     }
 
 箭头函数
   let fn1 =(name)=>{
      console.log('我的名字是'+name);
     }
     简写
     let fn1 =name=>console.log('我的名字是'+name);

简写规则

    a:把function改成箭头 =>
    b:如果形参只有一个,那是可以省略形参小括号的. 
    c:如果形参不是一个(0个或者多个),那就不能省略这个形参小括号.
    d:如果函数体只有一句话,那是可以省略这个大括号的.
    e:如果函数体只有一句话,并且是return那句话,那return也要省略. 
    f:如果函数体不是一句话,那就不能省略大括号.

箭头函数this指向

1.箭头函数的this,是声明他的环境上下文的this
2.普通函数的this指向的是它的调用者,谁调用this就指向谁,如果没有调用者,那这个this就指向window

箭头函数不宜使用的场景

不是什么时候都要用箭头函数的,方便的时候才用
箭头函数是匿名函数,不能作为构造函数,不要使用new关键字去调用箭头函数

let Student = (name,age)=>{
           this.name = name;
           this.age = age;
      }
     let s1 = new Student('波波',18);
    console.log(s1);

箭头函数的优缺点

优点:1、简洁的语法
2、隐式返回,如下面的代码可以去掉return,代码移到一行,减少代码量numbers.map((number)=>number*2)
3、解决了this的指向问题,原生的写法this指向是调用者,箭头函数this绑定的是定义时的那个对象。如果有对象嵌套的情况,则this绑定到最近的一层对象上

缺点:1、作为构造函数的时候不能使用箭头函数
2、真正需要this的时候如给元素绑定click事件的时候,执行的回调函数不能使用箭头函数
3、我们需要使用arguments对象的时候不能使用箭头函数。箭头函数中没有arguments对象。

你可能感兴趣的:(es6,javascript,前端)