浅浅的分析下es6箭头函数

前言

箭头函数作为es6重点的语法内容之一，很多开发者对其爱不释手，当也要注意其可能存在的问题，其正确的使用场景，否则会引起不必要的bug。

语法

//场景1 没有参数,空的小括号，返回值不用加 return，也就是说支持单一表达式,如果加return 需要构成语句
var demo=()=>5675;

//场景2 ：只有一个参数 ,小括号省略
var demo=num1=>5675;

//场景3：有多个参数
var demo=（num1，num2)=>5675;

//场景 4 ：有多个参数 ，并且需要语句块
var demo=(num1,num2)=>{
    if(num1<num2){
    return num1
    }else{
    return 2
    }
}

//场景5 ：需要返回的为对象时需要两队花括号来区分对象以及本身的语句块
var demo=()={{
 name:1,
 version:2
}}

特点

无this

箭头函数不会创建自己的this；它使用封闭执行上下文的this值。

适用场景

以下逻辑参考《你不知道的js》,请根据自己的需要进行选择是否使用箭头函数。

使用js箭头函数决策图

简单的理解上面的逻辑图大概就是这样的几个前提：
1 确定参数是固定的，没有默认值，没有rest参数收集器，如果有的话，也可以用一对小括号来归纳，对于整个团队你的参数是明显可知可控的。
2 简单的流式逻辑图，没有过多的逻辑或者业务判断
3 方法体比较简单，只是单个或者简单的表达语句
4 返回值是比较简单的基本数据类型，如果是对象需要额外的大括号，其他的返回内容也是额外注意的，无论哪种请保证你的返回值是明确的、可读的。

不适用场景

定义对象方法

一般情况下如果想定义对象下的函数，是多少涉及使用对象中的其他属性的，如果用箭头函数会因为对象无法形成作用域，没有相关上下文，导致this指向全局。特别需要说明的一点是，如果你对象属性方法中需要定义方法，同时想使用对象属性，那么此时建议使用箭头函数。代码参考如下：

字面直接量

let person={
  name:'zhangsan',
  say1:()=>{
    console.log(this.name)
  },
  say2:function(){
    console.log(this.name)
  },
  say3:function(){
    return ()=>{
     console.log(this.name)
}
  },
  say4:function(){
    return function(){
     console.log(this.name)
      }
  }
}
person.say1()//全局
person.say2()//对象
person.say3()()//对象
person.say4()()//全局

原型对象

function animal(){
  this.name='animal'
}
animal.prototype.run=()=>{
  console.log('animal：'+this.name)
}

animal.prototype.run2=function(){
  console.log('animal：'+this.name)
}
var dog=new animal();
dog.run()//codepen
dog.run2()//animal

定义事件的回调事件

此时用this唤起的是全局对象，而用传统方式是获取到的事件元素。

var btn=document.getElementById("btn"),
    btn2=document.getElementById("btn2");
btn.addEventListener("click",function(){
  console.log(this)
})
btn2.addEventListener("click",()=>{
  console.log(this)
})

构造器函数

因为箭头函数无法形成作用域，所以在实例化的时候构造器会失败，不能使用箭头函数实现构造器，真实的使用会报错。

let bird=()=>{
  console.log(this)
}
let xique=new bird()//bird is not a constructor

逻辑判断过于复杂

这时候逻辑过于复杂使用箭头函数会导致代码结构不清楚，建议使用原始的结构。
比如以下场景：
1 业务或者语法判断过于复杂
2 返回值情况很复杂

建议

尽管箭头函数和let、const以及一些es6语法变得风行，甚至于有些人觉得用箭头函数就觉得自己的技术进阶了，其实不然，大多人人还是停留在了它写法上的便利，并没有了解好其真正的使用场景。

总之，个人的建议是：上面提到的几种不适合的场景不要用箭头函数。箭头函数适用于那些参数业务逻辑以及返回值都简单的方法的实现。它本质我个人认为就是一段函数的简化写法，最大的利好在于传递了当前对象，避免了之前很多类似于var that=this ,self = this的写法。

参考文档

回复【领取资源】一键领取前端，Java，产品经理，微信小程序，Python等资源合集100G资源大放送。