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