![Vue.js 3.0从入门到精通(视频教学版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/154/44510154/b_44510154.jpg)
上QQ阅读APP看书,第一时间看更新
3.8 箭头函数
CoffeeScript就是因为有丰富的箭头函数,所以让很多开发者所喜爱。在ES6中,也有丰富的箭头函数。比如,以前我们使用闭包,this总是预期之外地产生改变,而箭头函数的好处在于,现在this可以按照你的预期使用了,身处箭头函数里面,this还是原来的this。
有了箭头函数,我们就不必像使用that=this或self=this、_this=this、.bind(this)那么麻烦了。例如,下面的代码使用ES5就不是很优雅:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P46_164884.jpg?sign=1739125932-ewOiRa7RXeNr9cxKbrMORCyQMSk0bVIW-0-4d7ac1994d00b206f45bef110f7bb07d)
在ES6中则不需要使用_this=this:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P46_164885.jpg?sign=1739125932-DuzDTuVKpjqtRaY4xPqdtc1YDMC4CaQq-0-5ff17180fc02ab206d225c330e0751f2)
但并不是完全否定之前的方案,ES6委员会决定,以前的function的传递方式也是一个很好的方案,所以它们仍然保留了以前的功能。
下面是另一个例子,通过call传递文本给logUpperCase()函数,在ES5中:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P46_164886.jpg?sign=1739125932-HfQs8RWChiuOZcO3SYTFCNEUezxn6dOL-0-d28796ad84f86a6959f99e6651ded1dc)
注意
在ES6中,“=>”可以混合和匹配老的函数一起使用。当在一行代码中用了箭头函数后,它就变成了一个表达式,其将暗中返回单个语句的结果。如果结果超过一行,则需要明确使用return。
在箭头函数中,对于单个参数,括号是可以省略的,但当参数超过一个时就需要使用括号了。在ES5代码中有明确的返回功能:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P46_164887.jpg?sign=1739125932-5IKk9SrwCW6r9Iq9bvBubViMEWFHze1W-0-4b61d1ca00d50e847989b42d2f8f3573)
在ES6中有更加严谨的版本,参数需要被包含在括号里并且是隐式地返回:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P47_164888.jpg?sign=1739125932-zgPaWfvFt6c6KSWTe9QrxC7mzNkDukdm-0-d19b2e327a30904e52fe5cb2ad36fb5f)