Vue.js 3.0从入门到精通(视频教学版)
上QQ阅读APP看书,第一时间看更新

3.8 箭头函数

CoffeeScript就是因为有丰富的箭头函数,所以让很多开发者所喜爱。在ES6中,也有丰富的箭头函数。比如,以前我们使用闭包,this总是预期之外地产生改变,而箭头函数的好处在于,现在this可以按照你的预期使用了,身处箭头函数里面,this还是原来的this。

有了箭头函数,我们就不必像使用that=this或self=this、_this=this、.bind(this)那么麻烦了。例如,下面的代码使用ES5就不是很优雅:

在ES6中则不需要使用_this=this:

但并不是完全否定之前的方案,ES6委员会决定,以前的function的传递方式也是一个很好的方案,所以它们仍然保留了以前的功能。

下面是另一个例子,通过call传递文本给logUpperCase()函数,在ES5中:

注意

在ES6中,“=>”可以混合和匹配老的函数一起使用。当在一行代码中用了箭头函数后,它就变成了一个表达式,其将暗中返回单个语句的结果。如果结果超过一行,则需要明确使用return。

在箭头函数中,对于单个参数,括号是可以省略的,但当参数超过一个时就需要使用括号了。在ES5代码中有明确的返回功能:

在ES6中有更加严谨的版本,参数需要被包含在括号里并且是隐式地返回: