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

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

将英文字母及阿拉伯数字旋转任意角度 -VB资料 将真彩色图像变为256色灰度(BIG5码):-VB资料 VB利用Image控件实现图形浏览程序 利用VB捕捉并保存屏幕图象 切割一个Container中的图片 -VB资料 VB如何改变桌面的图片? VB如何实现“百叶窗”的图形特效? VB如何实现霓虹灯效果 VB如何在VB中用API获得EXE文件图标并显示在Picture控件里 VB如何在VB中直接显示无格式256灰度级图像 VB如何在窗体中平铺图片? 三维字的实现 -VB资料 闪动窗口标题 -VB资料 闪烁的标题栏 -VB资料 实现画面的各种切换方法-VB资料 实现屏幕变暗的效果 -VB资料 实现图像切换效果 -VB资料 提取Win9x拷贝的动画-VB资料 一个图像滤光处理程序-VB资料 一个用VB5.0 实现的鼠标绘图程序 用VB6.0制作画图板 用VB6设计有趣的动画场景 用VB编程绘制网格图像 用VB绘制抛物线动画曲线 用VB绘制正弦动画曲线 用VB实现“百叶窗”的图形特效 用VB实现托盘动画图标 用Visual Basic 定制BMP文件 用Visual Basic的Move方法实现动画效果 用Visual Basic与MS-Draw开发通用作图软件 在VB中获取可执行文件及Windows 95快捷方式的图标 如何实现页面一打开就下载一个文件? 在delphi中用ShellExecute调用oracle的imp/exp/sql loader这些命令的语句应该怎样写? 在三层开发过程中,如果客户端是win95,则需要安装WinSocket2.0,问题是在程序中怎样判断客户端是否安装了WinSocket2.0版本? 谁有好用的http代理给一个? 请教浙大1038题 关于 SSI SHTML 方面的问题 好久不来了,今儿高兴,散分。(前十位) ADO的数据库连接问题 谁做过dbf文件转文本文件的程序 哪有介绍delphix的文章下载啊,我的英语水平实在不怎么样,那个help看不懂啊! 偶得一SDK电子书,不敢私有,与大家共享,与想了解SDK的朋友共享。 安装Red hat linux 7.3时遇到以下问题,请指教... 如何向另一个进程发送键盘消息或者给进程发送菜单命令? 高分之下,必有勇夫! 关于包的问题(什么情况下才能访问同一目录下另一文件的类?) 字体的大小问题! (三层结构)我按照李维书上所说的,为什么客户端老是连不上应用程序服务器端? 初学Delphi,请各位大虾帮助!高分送上 关于定位打印的问题!!! 怎么写分组发新闻的jsp程序 关于界面设计的问题... 我想自己写个Mp3播放器,结果遇到不少问题。请大家帮忙 WIN2000关机巨慢,原因是什么? 关于字符串比较大小?下面代码有错么????????????? c++调试问题? #include <string> 后编译不过去。请帮忙看看 请教各位:关于TButton->ModalResult 在NS浏览器中如何对text等这样的对象进行事件的处理? sql2000里如何得到当前记录号??/ ----------- iis或win2000server中如何设置文件夹大小??? 大家有没有做过医疗社区管理软件的?最好有成熟的源代码。 介绍一款好的主板,搭配p41.7G。 我升级了我的VB6程序,有个问题解决不了,来看看 做一个Java程序。将光盘上的某个目录拷到C盘上 清教一个计算机系统结构的计算题,题目见内容 关于文件读入的问题!谢谢各位! 数据统计分析问题,请专家关注!好难 如何判断执行 INSERT INTO 语句插入记录成功或失败? 哪位大侠能给我详细的介绍一下CWnd::SendMessage()函数 Strange return value of CoInitializeEx [HELP]辞职问题:杭州的GGJJ们来帮帮我 谁有windows 95的下载地址? ADO与本地数据库问题,看来是高难问题啊,怎么没人接招呢? tell me why??有关jdbc for sqlserver 2维数组按某一列进行排序,内详,求救? 关于在Oracle数据库服务器如何提供下载一个excel文件型的大对象到本地?十万火急!三根鸡毛! 怎样得到数据库里某字段里没出现过、而且还是最小的数字呢? 请问大家这种数据表怎样设计最好??? 关于ID3V2?请大家帮帮忙 <<VC技术内幕(第四版)>>中应用程序框架示例的程序要怎样才能运行? Win2K的远程访问出现身份验证问题 《琥珀》这篇课文是按什么写作顺序写的两种 九月九日忆山东兄弟表达了作者怎样的思想感情 九月九日忆山东兄弟解释一个 求几篇关于青春伤感的文章如题 想要 《九月九日忆山东兄弟.》,内容? 九月九日忆山东兄弟 的意思(简练) 从《将相和》一课中,我觉得赵王是一个————的人,因为他————. 琥珀 课文哪些部分描写了真实的情景哪些部分描述了想象的背景 求新闻评论的范文5篇要200字 《小池》 伤感的青春800字作文 2011新闻评论范文 求课文《琥珀》阅读答案琥珀形成经历了哪两个阶段?请使用简洁的语言概括第二阶段的内容. 青春悲伤的短文 麋鹿这篇课文从哪三方面来描写的[写出来』 (课文)写出下面想像的依据(1)一个夏天,太阳暖暖的照着.想像的依据( )(2)海在很远的地方翻腾怒吼.想像依据( )(3)树林里长着许多高大的松树.想像依据( )那,形成这块琥珀需要 写一篇科学小论文.500字左右. 我想做百度小学四年级数学测试卷上的题,怎么弄? 琥珀课文为什么要写苍蝇的身上沾满了灰尘 写一篇科技作文500字 镜子里看到的自己与手机拍出来的差很多哪个和别人看到的差不多? 课文--琥珀的价值 急求一篇科学小论文!500字 四年级上册鸟的天堂第八段有什么近义词 我想知道镜子里的自己比较真实还是照片?! 九月九日忆山东兄弟意思 镜子和手机哪个才是眼中的自己 将相和中,蔺相如 廉颇 赵王分别是怎样的人,为什么? 《九月九日忆山东兄弟》中的异是啥意思 《九月九日忆山东兄弟》的意思 小池作者是谁 九月九日忆山东兄弟是什么意思 初中阅读理解记叙文的标题有什么作用?请列出提纲 无题翻译 《九月九日忆山东兄弟》全文的意思 记叙文标题的作用是什么 《琥珀》这篇课文的作者是?本人急用!@#¥%…… 近视眼长期坐第一排看黑板会使度数增加吗?患者信息:女 16岁 摘录式读书笔记怎么写(要有范文加批注)内容好一点 加批注 无题的翻译 写新闻评论格式是什么样子的!?!?!谢谢各位了! 翠鸟捕鱼疾如什么 无题 无 题①黑板上赫然写道:学杂费总计97.5元.他盯着这个数字,口袋里的手攥着的那张皱巴巴的50元钱已被手心里的汗浸湿了.他不得不一步一回头地向学校门口走去……②他坐在自家堂屋 怎么写新闻评论? 三年级下册《翠鸟》一文中描写翠鸟耐心等候的语句、敏捷捕鱼的语句、我们喜爱翠鸟的语句 《琥珀》这篇课文的作者是谁 新闻评论怎么写啊? 新闻评论可以从哪些方面进行分析 6年级课文琥珀课文中写的这块有什么的特点 怎么写新闻评论呢?真的很难 我怎样才能把握住一个新闻点 怎样才能有一个中心? 新闻评论稿怎么写 李商隐无题 一篇自拟作文500字【四年级水平】 社会新闻评论怎么写要快 根据名字取英文名我的中文名字:马玉迪阳,要一个英文名字,该怎么取?最好是“**-M-迪”之类的 名字是男的 九月九日忆山东兄弟作者是谁 九月九日忆山东兄弟的山东是什么意思 想根据名字取个英文名姓名:徐晓雨女 狮子座希望能根据谐音起! 九月九日忆山东兄弟表达了作者( )的思想感情 :九月九日忆山东兄弟中的山东是什么意思
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘