ES6做为新一代JavaScript标准,已正式与广大前端开发者见面。为了让你们对ES6的诸多新特性有更深刻的了解,Mozilla Web开发者博客推出了《ES6 In Depth》系列文章。CSDN已获受权,将持续对该系列进行翻译,组织成【探秘ES6】系列专栏,供你们学习借鉴。本文为该系列的第七篇。
javascript
本文接下来说述的是有关ES6箭头函数(Arrow functions)的使用。前端
热身java
箭头符号在JS中一直扮演着重要的角色。在JS教程里,一开始都会介绍如何使用箭头括号来加注释。例如:es6
<script language="javascript"> <!-- document.bgColor = "brown"; // red // --> </script>旧版浏览器接收的是两个不支持的标签和一句注释,只有新版浏览器才会识别这是JS代码。
为了处理这种奇怪的表达方式,浏览器的JS引擎会把<!—识别为一行注释的开始位置。这种处理机制一直沿用至今,如今于Node中也适用。除此以外,-->还能够做为递增/减的操做符,例如while(n-->0) //n递减至0。浏览器
咱们先回顾下箭头符号的通常用法:函数
<!-- 单行注释学习
--> 递增/减的操做符this
<= 小于等于spa
=> ?.net
=>是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)) ;; Lisp lambda a: a > 0 # Python a => a > 0 // C# a -> a > 0 // Java新的箭头语法
ES6引入了新的箭头函数编写方式。
// ES5 var selected = allJobs.filter(function (job) { return job.isSelected(); }); // ES6 var selected = allJobs.filter(job => job.isSelected());当须要编写一个简单的单一参数函数时,能够采用箭头函数来书写,标识名=>表达式。这样就能够省却function和return的输入,还有括号,分号等。
当须要编写一个含有多个参数的函数时,只要把相关参数用括号包起来就行了。
// ES5 var total = values.reduce(function (a, b) { return a + b; }, 0); // ES6 var 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