浅浅的分析下es6箭头函数

原文链接：http://damobing.com/?p=589

前言

箭头函数作为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》,请根据自己的需要进行选择是否使用箭头函数。

简单的理解上面的逻辑图大概就是这样的几个前提：
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资源合集大放送：https://www.jianshu.com/p/e8197d4d9880

福利二：微信小程序入门与实战全套详细视频教程。

【领取方法】

关注【编程微刊】微信公众号：

回复【小程序demo】一键领取130个微信小程序源码demo资源。

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