android 箭头函数,浅谈箭头函数

ES6新引入了箭头函数,它是一种表达简洁的函数,下面我们来看看它有哪三个显著优势。

假设定义了一个名为names的数组,如下:

bVGZ54?w=3196&h=300

现在需要给数组的每一项后面添加’Bos’这个字符串,如果用传统的函数语句来实现,我们会这么做:

bVGZ6q?w=3184&h=632

(小注:因为用了模板字符串所以此例中使用了重音符’ ` ’)

那么,使用箭头函数可以怎么做?第一步,用 => 替代 function :

bVGZ6A?w=3200&h=640

第二步,当参数仅有一个的时候,可以把括弧省略,如下:

bVGZ6F?w=3200&h=640

是不是看上去简洁了些?

第三步:无需显示地写return语句,箭头函数内置 return 功能。即,如果你只想使用箭头函数返回什么东西的话,那么无需显示地写出 return 。如下:

bVGZ68?w=3196&h=468

这一步,除了删除return语句之外,还把花括号也删除了,并且把多行代码浓缩成一行。是不是非常简洁?但在这需要注意的是,之所以删除花括号,是因为函数体内仅有一句想要返回的语句。

当函数没有参数的时候,箭头函数还可以更进一步的简洁,即把括弧给去掉,换成下划线’_’。如下:

bVGZ7e?w=3196&h=300

此处由于不需要形参,我们把括弧’ ( ) ’删除用’ _ ’ 替代来假装变量名,实际上你可以在此用任何你想用的变量名,反正他们也不会真正被用上。比如:

bVGZ7p?w=3196&h=548

它们返回的都是’Cool Bos’组成的数组而已。

箭头函数中的this关键字,指向的是定义时的对象,而不是使用时的对象。即,虽然在以往的函数中,this所指的对象只有在调用的时候才知道是谁,但是在箭头函数中,它是固定不变的。我们拿两个例子来比对一下:

传统函数

bVGZ7A?w=2168&h=964

无论输出多少次p.age的值,都是0。因为作为Person构造函数实例的p对象,才是this所指的对象,而age这个私有属性在构造函数中已经定义,this.age的值便是0。

箭头函数

bVGZ7M?w=2148&h=676

而用箭头函数改写后,打印出的p.age值每一次都不相同,每当过去1秒,它的值+1。

我们再来三个例子说明一下:

构造函数里嵌套定时器的传统写法

bVGZ7R?w=2232&h=1600

可看到,函数体里最后一行this.val打印出来是0,但是定时器里每隔1秒打印出来的是值是NaN,因为在定时器里面的this指向的是window,然后在全局环境下并没有找到window.val的值,所以是NaN。

对上面的函数稍作修改

bVGZ71?w=1876&h=1660

在全局作用域下定义val这个变量,并给其赋值-10。

从结果可以看出,每隔1秒打印出来的值是全局作用域下的-10累加增1。

来看看箭头函数的情况

bVGZ8h?w=2152&h=1460

可以发现在定时器这个匿名函数作用域里,this所指向的对象,就是定义时所指的对象。对于构造函数来说,它就是Fn的实例p。所以,this.val的值基于0,每隔1秒增1。

最后补充一点:目前的JavaScript版本把所有箭头函数当成匿名函数,但我们可以用一个变量指向匿名函数,以这种方式来仿造声明函数(本文中的示例函数就是如此)。如下:

bVGZ8l?w=2792&h=476

据此,总结箭头函数的三个优点: 1. 语法简洁,能够写出漂亮的单行函数。2. 内置return语句,当函数只想返回某个东西的时候,可以不必显现地写出return。3.this关键字无需重新指定,这在进行事件绑定时会很有帮助。

需要补充的是,箭头函数里面没有arguments参数,如果需要用到,可以这么写(...arguments) => {...}。但是这种方法在严格模式下不适用。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值