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

【探秘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,进行前端技术交流。  

Chrome最新版:快速静音及在Win8中建Chrome OS系统 雅虎COO Henrique de Castro因业绩不佳被解雇 分析比特币背后的数据算法,抢占背后巨大市场先机 美食菜谱将会成创业风口的两大理由 Windows XP杀毒软件更新 将被延至2015年7月 小心,商家已经盯上你了 一软一硬 让你时刻保持清醒的可穿戴产品 寓教于乐 贝瓦依托移动平台打造中国式儿童“轻教育” 中科创达:CES2014上的中国红 SA:2014年移动互联网十大技术创新预测 回顾2013:HBase的提升与挑战 Google打造云中Hadoop便捷版,强势对抗AWS 【信息图】专业Web设计师和业余设计师的发展状况并不协调 先试后买:Agawi推新型广告服务AppGlimpse 搜狗CEO王小川:“硬件免费”是误区 平均比Hive快24倍,Impala剑指Stinger 利用ElasticSearch和Redis检索和存储十亿信息 微软高管再度失血 媒体及娱乐副总裁因内部重组离职 Google研制智能隐形眼镜 帮助病人监测血糖指标 盘点2013:最优秀的HTML5&amp;amp;CSS3设计【多图】 AMD:未来PC将同时搭载Android、Windows双系统 如果你是CEO,你打算给自己开多少工资? IBM X6架构中国首发,目标是云与大数据 Pivotal聘用eBay前副总裁,继续发力云计算市场 智能手机的功能越来越复杂,可惜用户不买账 一周消息树:Windows 9要来了,会有哪些改变? 简单几步解决IE11无法显示此页的问题 研发周报:Java 8最终发布日期敲定,即使有bug也要发布 一周云热点:Google打造云中Hadoop便捷版,强势对抗AWS 追溯Unite大会设计理念 感受Unity进化史 移动周报:仰望大神,不如退而探索! Session为什么掉了??急切等待!!! struts中一个页面如何显示多个FormBean? 过节了,散分,祝大家中秋快乐!!!!!! 請問TForm中相當於MFC中OnIdle()的event是什麼 数据库问题,急!!急!急!急!急! CISCO2600的ISDN拔号不会自动断线,怎么办? 谁知道怎么验证一个用户名和一个密码是不是在WINDOWS2000中添加过的?而且正确? 。。。谁能给我发一个“智能狂拼2”的下载连接地址 请求--网页评比规则? 在visual.net上无法调试存储过程。急。求救 asp加密程序 我用SQL server+DElphi中的ADO做数据应用程序,数据库备份后,怎样实现数据库的恢复? 贴子太多了,看不过来了,大力liuri出来讲讲 sqlserver 用 jdbc出错 ,Microsoft][SQLServer 2000 Driver for JDBC]Error setting up static cursor cache 如何在C#中用代码控制本地FTP服务打开和关闭?99分,中秋快乐. 关于dll的问题,在线求教 昨晚,我抱了我MM一下!开心呀!散分! 有什么软件可以使上网不受防火墙的限制? 一个C的图形函数,请问怎样用的? 数据库查询语句执行错误 web页面的activex控件怎么调用服务器上的动态连接库?? 中秋散分 【泰坦】祝大家中秋节快乐!(1) 纯jsp聊天室的页面刷新问题 这个MSDN是不是常说的那个MSDN资料库? 一句sql语句问题 【泰坦】祝大家中秋节快乐!(2) 我的触发器为什么没有响应啊。在线等啊 pb9.0+sql server 2000,怎样制作程序发布? pb给dll传递结构数组的问题。急!!! pb9.0+sql server 2000,怎样制作程序发布? 为什么关闭MSDEV的时候,会导致它占用90%以上的CPU时间??? 如何在代理中同時讓兩個套表同時結案 菜鸟问题:我想把一个CString类型转换成LPBYTE类型应该怎么弄? 如何在JRUN3.1中连接SQLSERVER, 我的web server用的是IIS5 怎么样在JSP中显示 WORD 或 WPS 格式的文件? 如何在servlet 中存储数组用javabean 取数组用JSP显示(在线等,急,谢谢) 如何使Response.Redirect "xxx.htm"打开的网页是满屏显示! 鄙视民工的人,给你讲个故事听。 庆祝中秋佳节,大散分~ 中秋节到了,与大家同庆,散点分!!!祝大家开心呀! VC的bug!!! 游戏、网络、图形等版块正在整顿中,有意见或建议欢迎提出!! 如何进一步提高C语言的功力???? 学习JSP的过程中遇到的问题(问题1),请进!!! 大家说一下网上下载的水晶报表crystal report 9.0会过期吗!!买一套要好几万的! 有个问题想请教,关于数码相机生成的图片的格式及存储方式! 在网站上数据保密问题 我用Inet控件下载文件时,经常会遇到无法结束程序的问题? 我在用电脑的时候,有时会提示我们插入WIN98光盘,但我现在用的这台,它会自动扫描的,自动查找,是怎么回事啊,在线等啊。 请问有DOS下的C++编译器吗???哪里下载?? 有理数中所有整数的和为? 皇帝与三省之间的关系? 疯狂猜图,两个字疯狂猜图,这个谁啊? 住在顶层的居民夏天直接受阳光的直晒,有什么办法使温度不会升得过高 第16道和第17道数学题, 对对子填空上联:左为《隆中对》,条分缕析,预知数十年后天下事.下联:右为《出师表》,康慨陈词,( ). 我想知道一种保健酒的成分? 建国大业陈坤和佟大为的台词,以及和蒋介石的台词,要全部孔令侃:姨妈,人家大权在握,一句话就把我扬子公司里里外外全都封了,还派人满上海的传讯我.也好,今天见了面,也省的大表哥大费 比喻与事情根源有联系的不明显现索 “锏”与“鞭”的区别是什么造型上(长度、外形、重量)和用法上(招式、对象)的区别 “反腐亡☭ 不反腐亡国”是jiang委员长提出来的吗? 韩国总统朴槿惠巴黎会见联合国教科文组印尼黑客袭击澳大利亚200多家网站 阿富汗总统批评美无人机炸死巴塔头目时日媒:日俄会谈 日“牵制中国”计划落法媒:孙杨为违章驾驶道歉激起中国网民中国东北三省再现“雾霾天” 多处高速南京“富二代”杀妻案今庭审 死者亲属国际人才交流大会即将开幕 杭州请高质南京军区原副司令:钓鱼岛空域在中国控南京网络谣言第一案:女子发帖勒索公司交通运输部启动Ⅳ级应急响应防抗台风“培智生的妈妈书林折枝“麻梨子疙瘩”热盼年轻手艺人中国大运河及丝绸之路申遗成功实为不乱跑!回龙观篮球超级联赛落幕克罗地亚VS墨西哥巴西人最爱沙滩足球裁判两次误判“送”波黑回家H组-韩国2-4阿尔及利亚中美女排对抗 球迷免费观赛劫火红莲异形战场游猎神医3迷天非常穿越:姐要逆天而行星际修真穿越清末当土匪龙游大唐之贞元记事图夫二合一的网游桃江旅游代县旅游环江旅游吉木萨尔旅游成县旅游上杭旅游铜鼓旅游云林旅游平和旅游孟连旅游弋阳旅游
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘