说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

【探秘ES6】系列专栏(七):箭头函数

HTML文档下载 WORD文档下载 PDF文档下载
新一代JavaScript标准ES6正式发布。【探秘ES6】系列专栏将一一剖析ES6的诸多新特性,让Web开发者对此有清晰全面的了解。本文为系列的第七篇,带你了解ES6的箭头函数。

ES6作为新一代JavaScript标准,已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解,Mozilla Web开发者博客推出了《ES6 In Depth》系列文章。CSDN已获授权,将持续对该系列进行翻译,组织成【探秘ES6】系列专栏,供大家学习借鉴。本文为该系列的第七篇。 

本文接下来讲述的是有关ES6箭头函数(Arrow functions)的使用。

热身

箭头符号在JS中一直扮演着重要的角色。在JS教程里,一开始都会介绍如何使用箭头括号来加注释。例如:

<script language="javascript"><!--  document.bgColor = "brown";  // red// --></script>

旧版浏览器接收的是两个不支持的标签和一句注释,只有新版浏览器才会识别这是JS代码。

为了处理这种奇怪的表达方式,浏览器的JS引擎会把<!—识别为一行注释的开始位置。这种处理机制一直沿用至今,现在于Node中也适用。除此之外,-->还可以作为递增/减的操作符,例如while(n-->0) //n递减至0。

我们先回顾下箭头符号的一般用法:

  • <!-- 单行注释
  • -->  递增/减的操作符
  • <=   小于等于
  • =>   ?

=>是ES6中新的用法,也就是本节要讲述的内容。

随处可见的函数式表达

在JS中很有意思的地方是当我们需要调用函数时,只需在运行代码中的恰当位置添加就可以了。例如要对按钮的点击做出响应,可以这样写:

$("#confetti-btn").click(function (event) {  playTrumpet();  fireConfettiCannon();});

在JS开始盛行前,这样的代码是令人奇怪的,因为很多语言当时都没有类似的写法。除了1958年List语言的lambda(匿名)函数有函数表达式功能,C++、Python、C#等语言长时间里都是没有的。到了现在,lambda已经随处可见了,这多亏了JS的功劳。例如,

// A very simple function in six languages.function (a) { return a > 0; } // JS[](int a) { return a > 0; }  // C++(lambda (a) (> a 0))  ;; Lisplambda a: a > 0  # Pythona => a > 0  // C#a -> a > 0  // Java

新的箭头语法

ES6引入了新的箭头函数编写方式。

// ES5var selected = allJobs.filter(function (job) {  return job.isSelected();});// ES6var selected = allJobs.filter(job => job.isSelected());

当需要编写一个简单的单一参数函数时,可以采用箭头函数来书写,标识名=>表达式。这样就可以省却function和return的输入,还有括号,分号等。

当需要编写一个含有多个参数的函数时,只要把相关参数用括号包起来就好了。

// ES5var total = values.reduce(function (a, b) {  return a + b;}, 0);// ES6var total = values.reduce((a, b) => a + b, 0);

我认为这是最简洁的书写格式。

箭头函数的功用与Underscore.js和immutable等库的功能类似,immutable的示例文档中全部都是使用ES6来编写的,因此使用了大量的箭头函数。

除了函数样式编写,箭头函数还可以包含区块语句而不仅仅是单一表达式。例如:

/ ES5$("#confetti-btn").click(function (event) {  playTrumpet();  fireConfettiCannon();});

ES6的写法为:

// ES6$("#confetti-btn").click(event => {  playTrumpet();  fireConfettiCannon();});

this是什么?

普通函数与箭头函数有个微小的不同点。箭头函数没有自己的this值,其this值是通过继承其它传入对象而获得的。

JS是如何处理this的呢?这可不是个简单的问题。其中不论函数有没有真的需要处理this,函数都是会接收到的。你曾经写过如下代码吗?

{  ...  addAll: function addAll(pieces) {    var self = this;    _.each(pieces, function (piece) {      self.add(piece);    });  },  ...}

这里,其实你想写的内联函数仅仅是this.add(piece)。然而内联函数不会继承外部函数的this值。在内联函数中,this的值是window或undefined。临时变量self用于向内联函数传入外部this值。

在ES6中,如果遵循如下原则则可避免类似的做法:

  • 使用非箭头函数来处理由object.method()语法调用的方法。因为它们会接收到来自调用者的有意义的this值。
  • 在其它场合都使用箭头函数。

// ES6{  ...  addAll: function addAll(pieces) {    _.each(pieces, piece => this.add(piece));  },  ...}

什么时候使用箭头函数

ES6箭头函数在Firefox、Babel、Traceur、TypeScript等项目都有使用。在1936年,Alonzo Church和Alan Turing一起开发了强大的数学计算机模型,人们习惯把它称为图灵机。Church编写了名为λ-calculus的模型,当时他发现需要在系统使用到“函数”。

这是一个结合Church想法的“程序”示例:

fix = λf.(λx.f(λv.x(x)(v)))(λx.f(λv.x(x)(v)))

JS中可表示为:

var fix = f => (x => f(v => x(x)(v)))               (x => f(v => x(x)(v)));

这个故事告诉我们,箭头函数可以帮助打破陈规,从新的角度来思考问题。借助箭头函数,ES6将会变得更好更强大。(译者:伍昆 责编:陈秋歌)

原文链接:ES6 In Depth: Arrow functions

本译文遵循Creative Commons Attribution Share-Alike License v3.0 

相关阅读:

【探秘ES6】系列专栏(一):ES6简介

【探秘ES6】系列专栏(二):迭代器和for-of循环

【探秘ES6】系列专栏(三):生成器

【探秘ES6】系列专栏(四):模版字符串

【探秘ES6】系列专栏(五):剩余参数和默认参数

【探秘ES6】系列专栏(六):解构赋值

欢迎加入CSDN前端交流群:218126086,进行前端技术交流。  

回顾Google这一年——Android篇 百度手机卫士正式发布 “防吸费”功能全球首创 2013年平板电脑市场竞争回顾 Apple太阳能数据中心进展顺利,但却在税负减免上备受争议 一名开发者的年度回顾 智能手表Pebble明年初推应用商店 开发者今日起可提交应用 够快科技推出企业级云存储服务“够快云库” 项目开发中,质量和速度哪个更重要? 亚马逊AWS落地中国,云计算产业圈集体发力 Node.js 2013年大事记 【开源推荐】ThinkPHP:大道至简,让Web开发更简单 IE11中的WebGL探秘:渲染速度超Chrome 数据驱动智能:百度在计算广告学领域的技术突破 UX设计师和软件开发者,谁将是2014年的老大? 爸爸去哪儿:开发知名题材手游压力山大 多平台同步 谈IE11全新功能 高通副总裁沈劲:移动是产生变革的强大原动力 高性能、高流量Java Web站点打造的22条建议 云巅:第三代虚拟技术+搜索引擎+乐高理念打造分布式桌面云 Intel:从“芯”构建下一代数据中心 WhatsApp:50名员工,月4亿活跃用户,日160亿条消息和5亿张图片 三星Galaxy Gear智能手表失利 需改进的8个方面 IE11全新的F12开发人员工具详解 研发周报:为什么开发者担心将代码公布 Hadoop YARN的发展史与详细解析 一周消息树:Firefox OS会不会成为下一个Android PhoneGap 3.3.0发布,支持Android 4.4 KitKat 移动周报:两岸三地在线编程学习网站大搜罗 有道周枫和他的“放养”团队 看IE11如何助力AAF推动公益事业 SUSE总裁Nils:将SUSE Cloud 2.0打造成“零影响的云安装程序” 调查:现在大家所用的中文输入法是什么?录入速度是多少? 数据库程序的运行环境建立问题求救!!! 伙计们,帮我看看我的安装差在哪一步了,为何多系统下Linux起不来 如何将文件输入流转化为string? 关一个Servlet调用另一个Servlet的问题 有关报表的一个小问题。 怎样才能做繁体版? 100分请教PHOTOSHOP5.0是如何把CMYK颜色转成RGB显示的? 需求进销存或分销 如何替换某字符串中的指定字符串!!! tcp/ip 如何获取文件的创建时间? 如何再98中删除IE的历史纪录,很怪~~~~~~~~~~~! 讨论:从IDL开始所有的编程工作 大虾们如何动态创建Table的field Editor功能 高分求解!与Delphi的参数问题! xml spy suite4.2需要联机注册,有没有方法可以使用? linux为何没有出现在启动菜单 @_@ 在DELPHI中如何把一目录下的某文件移到另一目录中——急 在C#中如何用BinaryReader把DLL文件的内容读出来,并转来string? 如何根据Task ID或Process ID得到hwnd 如何让程序启动时自动hide()阿! 问一个最大化窗体与任务栏的关系的问题 把一表中一字段(字符型)以一條記錄返回出來. Rational Rose 中没有Delphi方面得模块,哪儿有与Delphi接口下载 谁有ActiveReport 2的中文例子和原程?在线等待!急急急! 大家来讨论一下,《设计模式》应该怎么看!! 关于打印的问题,高手关注! datagrid如何实现分页,。net菜鸟 声音问题 access数据库加密后,如何再用ADO与之连接? 有谁用过ms Agent? 很菜的问题! delphi里的widestring类型对应着BCB里的什么类型啊 开了一个socket,acept后如何给ie发一个字符串显示出来? access数据库加密后,如何再用ADO与之连接? 如何查询出所有用户表名 PWS中的一个小问题 请问DataSet里的Relations和Constraints有什么区别? 想了三天,还是做不出 请问如何创建一个大于屏幕分辨率的窗口? 公开putao的最大秘密,他女友的隐私! 关于不同版本的用户对象的问题!(online) 在批处理中设置路径,有空格系统不认怎么办? 为了忘却的纪念(今天是咱们的国耻日) 关于JSP菜单实现的问题? 如何判断数组是否被赋值? 用MSCHART的二维折线图如何实现左右坐标分别标识不同的曲线? 请问招行的网上银行的在网上点击安装是怎么实现的呀? 100分只是开始。。。 如果回答继续加!! 一个template问题,想不出办法,高手请进 寻找作文开头要以景物衬托人物心情的 2个悲伤一个开心 四年级珍惜生命的作文 (作文)题目是新年新事,写人们拘泥于往年的作文,500字以上不记流水账,语句要通顺,记得是500字以上,不能少于500.. 急求关于弘扬中国传统文化的文言文或古诗词 小伙伴作文500字 生命作文400字四年级,网上抄的滚开,要求有真实事例,比如:小草 小花艰苦地生长过程,感受要深.多给几篇, 中华传统文化古诗是怎么由来的? 校园新鲜事!50~60字!不要作文的!校园里好玩的事!运动会可以! 谁知道作文的结尾怎么写要点题 关于中华传统文化的好词有哪些 什么里的新鲜事 作文 600字 关于国庆节校园新事作文500字 成长中的一件事作文开头怎么写 作文一件快乐的事可以写什么开头 作文:新年新事500字左右 求使我成长的一件事作文开头 镜头式开头的描写小伙伴的作文急 我家新事的作文500字就够了 美丽的风景小学四年级作文 我的小伙伴作文开头结尾(必须是新奇的,不能是太平常的) 谁有关于木棉花的作文! 关于元旦手抄报的英语文章?快KKKKKKKK有没有人知道,中文的也行 我的小伙伴作文开头 好的木棉花的作文两篇要初中的作文 英语手抄报用的..文章..不要叙事的...要那种优美的..要英语的...中文54 我的小伙伴作文开头(排比句) 初一写木棉花的作文那位大哥大姐帮帮我 新年英语手抄报短文英语手抄报类型,字数50到100左右,最好是四年级上册的, 小明家用边长为6分米的地砖来铺卧室的地面,一共铺了50快,他家的卧室面积是多少平方米 写运动会的作文怎么结尾 以 My School 为题写一篇50~60词的英语短文1.学校周围的建筑物 2.对学校的感情 3.在学校所学的课程【语文数学英语音乐科学 PE[体育]】 小明卧室地面的面积为10.8m2,恰好由12O块相同的正方形地砖铺成,求正方形地砖的边长 运动会作文 结尾 找以下题材作文的开头结尾1亲情 2师生情 3社会之爱(例如援救灾区人民)4节能环保 5成功的喜悦 6我爱家乡的什么什么 7我的字画像 我家的新鲜事作文500字好词多 运动会接力 作文(只要个开头、结尾)接力,我们去年是最后,今年,大家都很努力,特拼命,有个人受伤了,蛮严重的,请结合这个情况,给一个开头结尾.好的, 四年级作文家乡的景物 关于中秋节的古文(不是诗)我希望能得到很多的关于中秋节的古文,注意:不是诗,也不是词,就是有关的散文或记叙性的古文(要古人写的,不是自己编的文言文),潘之恒的《秦淮看月记》 运动会作文结尾? 家乡处处是美景 要写四季的 我的小伙伴作文开头,要新颖的,30-40字.不要外貌描写 新年新事作文200字 家乡的景物作文 我家的新鲜事作文(500字) 《我在阳光下成长》作文,小树在阳光照耀下蓬勃向上;鲜花在阳光照耀下竞相开放;雏鹰在阳光照耀下展翅飞翔……我在阳光下成长。丰富多彩的校园,温馨和谐的家庭,欣欣向荣的祖国, A.B.C.D.E五位同学的数学平均分是91.9分,A.B.C三位同学的平均分是88分,C.D.E三位同学的平均分是90.C是几分 与传统节日有关的古诗文 求像这样的文章 求800字作文、(急用)以“游丝”“羽毛”“柳絮”“水沫”“烟”等为题材、写一篇关于“轻’的作文 用同样的地砖铺地,铺16平方米需要用80块,如果铺200平方米,需要用多少块地砖?(用多种方法解答 作文在阳光下成长怎么写要注意什么,别给我弄什么吃不起饭,什么转载的一些不显示的作为 关于家乡景色作文都有什么?必须非常详细吗? 描写中秋节的古诗 新年新事多 作文 600字新年新事多 作文,要写有趣的,有意义的,新鲜的事物,符合现在年代的.(我不要复制的,都看过了,不符合老师要求)今天要,求有才的大哥大姐们帮个忙吧, 如图,等腰梯形ABCD中,E为CD的中点,EF⊥AB于F,如果AB=6,EF=5,求梯形的面积 描写景的四字好词,最好是描写景的 关于新年新事的作文 600字左右 校园里的新鲜事 作文 平安校园.500字左右.写校园里的平安 《在阳光下成长》作文怎么写?
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘