文档章节

什么时候不能使用es6箭头函数?

duozuo2006
 duozuo2006
发布于 2016/12/05 17:47
字数 1109
阅读 13
收藏 0
点赞 0
评论 0

es6有很多优秀的新特性,其中最有价值的特性之一就是箭头函数,他简洁的语法以及更好理解的this值都非常的吸引我。但是新事物也是有两面性的,箭头函数有他的便捷有他的优点,但是他也有缺点,他的优点是代码简洁,this提前定义,但他的缺点也是这些,比如代码太过简洁,导致不好阅读,this提前定义,导致无法使用js进行一些es5里面看起来非常正常的操作。针对这些缺点,下面我就总结一下什么情况下不该使用箭头函数。

 

1.在对象上定义函数

先来看下面这段代码

 

sum方法定义在obj对象上,当调用的时候我们发现抛出了一个TypeError,因为函数中的this是window对象,所以this.array也就是undefined。原因也很简单,相信只要了解过es6 箭头函数的都知道

 

箭头函数没有它自己的this值,箭头函数内的this值继承自外围作用域

解决方法也很简单,就是不用呗。这里可以用es6里函数表达式的简洁语法,在这种情况下,this值就取决于函数的调用方式了。

 

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

 

2.在原型上定义函数

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

 

使用function函数表达式

 

所以给对象原型挂载方法时,使用function函数表达式

 

3.动态上下文中的回调函数

this是js中非常强大的特点,他让函数可以根据其调用方式动态的改变上下文,然后箭头函数直接在声明时就绑定了this对象,所以不再是动态的。

 

在客户端,在dom元素上绑定事件监听函数是非常普遍的行为,在dom事件被触发时,回调函数中的this指向该dom,可当我们使用箭头函数时:

 

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

 

4.构造函数中

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

 

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

 

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

 

5.太简短的(难以理解)函数

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

 

这个函数的作用就是当只有一个参数a时,返回接受一个参数b返回a*b的函数,接收两个参数时直接返回乘积,这个函数可以很好的工作并且看起很简洁,但是从第一眼看去并不是很好理解。

 

为了让这个函数更好的让人理解,我们可以为这个箭头函数加一对花括号,并加上return语句,或者直接使用函数表达式:

总结

毫无疑问,箭头函数带来了很多便利。恰当的使用箭头函数可以让我们避免使用早期的.bind()函数或者需要固定上下文的地方并且让代码更加简洁。

 

箭头函数也有一些不便利的地方。我们在需要动态上下文的地方不能使用箭头函数:定义需要动态上下文的函数,构造函数,需要this对象作为目标的回调函数以及用箭头函数难以理解的语句。在其他情况下,请尽情的使用箭头函数。

 

关于本文

作者:@Jax2000

原文:https://segmentfault.com/a/1190000007074846

© 著作权归作者所有

共有 人打赏支持
duozuo2006
粉丝 0
博文 10
码字总数 8728
作品 0
北京
【探秘ES6】系列专栏(七):箭头函数

ES6作为新一代JavaScript标准,已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解,Mozilla Web开发者博客推出了《ES6 In Depth》系列文章。CSDN已获授权,将持续对该...

一配 ⋅ 2015/11/08 ⋅ 0

ES6函数比对ES5函数

简介 这里只做简单的ES6函数与ES5函数对比,把ES6函数中新增的方法或者用法介绍一下。方便大家学习、记忆。随着社会发展,浏览器肯定会在不久全部支持ES6语法,因为现在的IE8用户都很少了,做...

java-script ⋅ 2017/12/03 ⋅ 0

React/React Native 的ES5 ES6写法对照表

很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(),然而网上搜到的很多教程和例子都是ES5版本的,所以很多人在学习的时候连照猫画虎都不知道怎么做...

freecsdn ⋅ 2016/09/14 ⋅ 0

Javascript ES6中的箭头函数

ES6可以使用“箭头”(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器)。 一、语法 1. 具有一个参数的简单函数 ? 2. 没有参数的需要用在箭头前加上小括号 ? 3. 多个参数需要用到...

朱先忠老师 ⋅ 2017/10/16 ⋅ 0

es6基本语法

ES6是javascript的下一个版本,也叫做ECMAScript 2015,相对于es5,es6添加了许多新的特性,语言语法更加规范了,es6的出现使javascript步入了编程语言的正规军行列里,很多公司都逐渐使用es6...

马大哈tt ⋅ 2017/12/23 ⋅ 0

ES6中箭头函数的作用

我们知道在ES6中,引入了箭头函数,其本质就是等同有ES5中的函数。类似于下面的写法: let test1=() => “abc”; let test2=() => { return “abc”}; let sum=(a,b) => a+b; 比如上面的3个E...

chancein007 ⋅ 2017/11/14 ⋅ 0

2017.11.28-学习笔记:篇四之es6函数扩展

函数的扩展 1.函数参数的默认值 1.参数变量是默认声明的,所以函数内部不能用 let 或 const 再次声明 2.参数默认值是惰性求值的,不是传值的,而是每次都重新计算默认值表达式的值。 3.与解构...

演员小新 ⋅ 2017/11/28 ⋅ 0

【翻译】你知道何时使用或者不使用ES6箭头函数吗?

首先不得不承认,箭头函数是ES6中非常受欢迎的一个功能,它提出了一种新的书写方式来简洁的定义函数。 举例说明: ES5: 使用ES6箭头函数: 代码更简短,而且可以省略大括号和return语句(在没...

RichardBillion ⋅ 06/14 ⋅ 0

ES6常用特性

1、什么是ECMAScript6?和JavaScript什么关系? 1.1 什么是ECMAScript6? 首先说一下什么是ECMA(European Computer Manufacturers Association)欧洲计算机制造商协会。 如果说ECMA是一种组...

方千竹 ⋅ 2017/12/15 ⋅ 0

前端开发者不得不知的 ECMAScript 6 十大特性

ES6(ECMAScript2015)的出现,无疑给前端开发人员带来了新的惊喜,它包含了一些很棒的新特性,可以更加方便的实现很多复杂的操作,提高开发人员的效率。 本文主要针对ES6做一个简要介绍。 ...

oschina ⋅ 2016/03/16 ⋅ 24

没有更多内容

加载失败,请刷新页面

加载更多

下一页

DevOps 资讯 | PostgreSQL 的时代到来了吗 ?

PostgreSQL是对象-关系型数据库,BSD 许可证。拼读为"post-gress-Q-L"。 作者: Tony Baer 原文: Has the time finally come for PostgreSQL?(有删节) 近30年来 PostgreSQL 无疑是您从未听...

RiboseYim ⋅ 13分钟前 ⋅ 0

Cube、Cuboid 和 Cube Segment

1.Cube (或Data Cube),即数据立方体,是一种常用于数据分析与索引的技术;它可以对原始数据建立多维度索引。通过 Cube 对数据进行分析,可以大大加快数据的查询效率 2.Cuboid 在 Kylin 中特...

无精疯 ⋅ 51分钟前 ⋅ 0

github太慢

1:用浏览器访问 IPAddress.com or http://tool.chinaz.com 使用 IP Lookup 工具获得github.com和github.global.ssl.fastly.net域名的ip地址 2:/etc/hosts文件中添加如下格式(IP最好自己查一...

whoisliang ⋅ 52分钟前 ⋅ 0

非阻塞同步之 CAS

为解决线程安全问题,互斥同步相当于以时间换空间。多线程情况下,只有一个线程可以访问同步代码。这种同步也叫阻塞同步(Blocking Synchronization). 这种同步属于一种悲观并发策略。认为只...

长安一梦 ⋅ 今天 ⋅ 0

云计算的选择悖论如何对待?

人们都希望在工作和生活中有所选择。但心理学家的调查研究表明,在多种选项中进行选择并不一定会使人们更快乐,甚至不会产生更好的决策。心理学家Barry Schwartz称之为“选择悖论”。云计算为...

linux-tao ⋅ 今天 ⋅ 0

Redis 注册为 Windows 服务

Redis 注册为 Windows 服务 redis 注册为 windows 服务相关命令 注册服务 redis-server.exe –service-install redis.windows.conf 删除服务 redis-server –service-uninstall 启动服务 re......

Os_yxguang ⋅ 今天 ⋅ 0

世界那么大,语言那么多,为什么选择Micropython,它的优势在哪?

最近国内MicroPython风靡程序界,是什么原因导致它这么火呢?是因为他功能强大,遵循Mit协议开源么? 错!因为使用它真的是太舒服了!!! Micropython的由来,这得益于Damien George这位伟大...

bodasisiter ⋅ 今天 ⋅ 0

docker 清理总结

杀死所有正在运行的容器 docker kill $(docker ps -a -q) 删除所有已经停止的容器(docker rm没有加-f参数,运行中的容器不会删掉) docker rm $(docker ps -a -q) 删除所有未打 dangling 标...

vvx1024 ⋅ 今天 ⋅ 0

关于学习

以前学车的时候,教练说了这样的一句话:如果一个人坐在车上一直学,一直学,反而不如大家轮流着学。因为一个人一直学,就没有给自己留空间来反思和改进。而轮流着学的时候大家下来之后思考上...

mskk ⋅ 今天 ⋅ 0

压缩工具之gzip-bzip2-xz

win下常见压缩工具:rar zip 7z linux下常见压缩工具:zip gz bz2 xz tar.gz tar.bz2 tar.xz gzip 不支持目录压缩 gzip 1.txt #压缩。执行后1.txt消失,生成1.txt.gz压缩文件 gzip -d 1.txt....

ZHENG-JY ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部