![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=1738983854-w7v189likXfYzJCMSe7QMWvcWnFugksm-0-dff57b86615c64fbb5cc199861fbafb6)
在ES6中则不需要使用_this=this:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P46_164885.jpg?sign=1738983854-GdloKOy4oH5c31nPlp8p303t28hU7Rox-0-d23a43cbe4007a6605a71d63e13c897f)
但并不是完全否定之前的方案,ES6委员会决定,以前的function的传递方式也是一个很好的方案,所以它们仍然保留了以前的功能。
下面是另一个例子,通过call传递文本给logUpperCase()函数,在ES5中:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P46_164886.jpg?sign=1738983854-uBmY4tpF0ZfesycVVkmSFQCJpGK5iCV2-0-68260849aac5a09518c4ffd10eec9978)
注意
在ES6中,“=>”可以混合和匹配老的函数一起使用。当在一行代码中用了箭头函数后,它就变成了一个表达式,其将暗中返回单个语句的结果。如果结果超过一行,则需要明确使用return。
在箭头函数中,对于单个参数,括号是可以省略的,但当参数超过一个时就需要使用括号了。在ES5代码中有明确的返回功能:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P46_164887.jpg?sign=1738983854-S0DRfsUrqDBiUuoC4cNwZiqAi5tAfzec-0-f050b18b227a4b66e50f4f52e01426b9)
在ES6中有更加严谨的版本,参数需要被包含在括号里并且是隐式地返回:
![](https://epubservercos.yuewen.com/AF1F26/23721640501031706/epubprivate/OEBPS/Images/Figure-P47_164888.jpg?sign=1738983854-PKiWYgygk1PrlUjlEk68qoyWNGEYIDYd-0-a39946ecfa174ccf07e2b9c85f0b8cb9)