es6——箭头函数

原创 minsong 随笔 es6 252阅读 2018-05-17 11:57:54 举报

可以看一下关于this的介绍,this的原理

1.基本用法

箭头函数可以与变量解构结合使用。

箭头函数的一个用处是简化回调函数。

rest 参数与箭头函数结合的例子。

2.为什么需要箭头函数

先看一个例子

3.使用注意点

(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
(4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。
上面四点中,第一点尤其值得注意。this对象的指向是可变的,但是在箭头函数中,它是固定的。
this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。正是因为它没有this,所以也就不能用作构造函数。

除了this,以下三个变量在箭头函数之中也是不存在的,指向外层函数的对应变量:arguments、super、new.target。

上面代码中,箭头函数内部的变量arguments,其实是函数foo的arguments变量。

4.什么时候不能用箭头函数

1.在对象上定义函数
先来看下面这段代码

sum方法定义在obj对象上,当调用的时候我们发现抛出了一个TypeError,因为函数中的this是window对象,所以this.array也就是undefined。原因也很简单,相信只要了解过es6 箭头函数的都知道箭头函数没有它自己的this值,箭头函数内的this值继承自外围作用域
解决方法也很简单,就是不用呗。这里可以用es6里函数表达式的简洁语法,在这种情况下,this值就取决于函数的调用方式了。

通过object.method()语法调用的方法使用非箭头函数定义,这些函数需要从调用者的作用域中获取一个有意义的this值。

2.在原型上定义函数
在对象原型上定义函数也是遵循着一样的规则

使用function函数表达式

3.动态上下文中的回调函数
this是js中非常强大的特点,他让函数可以根据其调用方式动态的改变上下文,然后箭头函数直接在声明时就绑定了this对象,所以不再是动态的。
在客户端,在dom元素上绑定事件监听函数是非常普遍的行为,在dom事件被触发时,回调函数中的this指向该dom,可当我们使用箭头函数时:

因为这个回调的箭头函数是在全局上下文中被定义的,所以他的this是window。所以当this是由目标对象决定时,我们应该使用函数表达式:

4.构造函数中
在构造函数中,this指向新创建的对象实例

需要注意的是,构造函数不能使用箭头函数,如果这样做会抛出异常

理论上来说也是不能这么做的,因为箭头函数在创建时this对象就绑定了,更不会指向对象实例。

5.太简短的(难以理解)函数
箭头函数可以让语句写的非常的简洁,但是一个真实的项目,一般由多个开发者共同协作完成,就算由单人完成,后期也并不一定是同一个人维护,箭头函数有时候并不会让人很好的理解,比如

这个函数的作用就是当只有一个参数a时,返回接受一个参数b返回a*b的函数,接收两个参数时直接返回乘积,这个函数可以很好的工作并且看起很简洁,但是从第一眼看去并不是很好理解。
为了让这个函数更好的让人理解,我们可以为这个箭头函数加一对花括号,并加上return语句,或者直接使用函数表达式:

5.总结

毫无疑问,箭头函数带来了很多便利。恰当的使用箭头函数可以让我们避免使用早期的.bind()函数或者需要固定上下文的地方并且让代码更加简洁。
箭头函数也有一些不便利的地方。我们在需要动态上下文的地方不能使用箭头函数:定义需要动态上下文的函数,构造函数,需要this对象作为目标的回调函数以及用箭头函数难以理解的语句。在其他情况下,请尽情的使用箭头函数。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复