箭头函数作为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值。
以下逻辑参考《你不知道的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
的写法。