箭头函数 Arrow Functions/////////////////////zzz

箭头符号在JavaScript诞生时就已经存在，当初第一个JavaScript教程曾建议在HTML注释内包裹行内脚本，这样能够避免不支持JS的浏览器误将JS代码显示为文本。你会写这样的代码：

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

老式浏览器会将这段代码解析为两个不支持的标签和一条注释，只有新式浏览器才能识别出其中的JS代码。

为了支持这种奇怪的hack方式，浏览器中的JavaScript引擎将<!--这四个字符解析为单行注释的起始部分，我没开玩笑，这自始至终就是语言的一部分，直到如今仍然有效，这种注释符号不只出现<script>标签后的首行，在JS代码的每一个角落你都有可能见到它，甚至在Node中也是如此。

碰巧，这种注释风格首次在ES6中被标准化了，但在新标准中箭头被用来作其它事情。

箭头序列-->一样是单行注释的一部分。古怪的是，在HTML中-->以前的字符是注释的一部分，而在JS中-->以后的部分才是注释。

你必定感到陌生的是，只有当箭头在行首时才会注释当前行。这是由于在其它上下文中，-->是一个JS运算符：“趋向于”运算符！

function countdown(n) { while (n --> 0) // "n goes to zero" alert(n); blastoff(); }

上面这段代码能够正常运行，循环会一直重复直到n趋于0，这固然不是ES6中的新特性，它只不过是将两个你早已熟悉的特性经过一些误导性的手段结合在一块儿。你能理解么？一般来讲，相似这种谜团均可以在Stack Overflow上找到答案。

固然，一样地，小于等于操做符<=也形似箭头，你能够在JS代码、隐藏的图片样式中找到更多相似的箭头，可是咱们就不继续寻找了，你应该注意到咱们漏掉了一种特殊的箭头。

<!--	单行注释
-->	“趋向于”操做符
<=	小于等于
=>	这又是什么？

=>究竟是什么？咱们今天就来一探究竟。

首先，咱们谈论一些有关函数的事情。

函数表达式无处不在

JavaScript中有一个有趣的特性，不管什么时候，当你须要一个函数时，你均可以在想添加的地方输入这个函数。

举个例子，假设你尝试告诉浏览器用户点击一个特定按钮后的行为，你会这样写：

$("#confetti-btn").click(

jQuery的.click()方法接受一个参数：一个函数。没问题，你能够在这里输入一个函数：

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

对 于如今的咱们来讲，写出这样的代码至关天然，而回忆起在这种编程方式流行以前，这种写法相对陌生一些，许多语言中都没有这种特性。1958年，Lisp首 先支持函数表达式，也支持调用lambda函数，而C++，Python、C#以及Java在随后的多年中一直不支持这样的特性。

如今大相径庭，全部的四种语言都已支持lambda函数，更新出现的语言广泛都支持内建的lambda函数。咱们必需要感谢JavaScript和早期的JavaScript程序员，他们勇敢地构建了重度依赖lambda函数的库，让这种特性被普遍接受。

使人伤感的是，随后在全部我说起的语言中，只有JavaScript的lambda的语法最终变得冗长乏味。

// 六种语言中的简单函数示例 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，一些小括号、大括号以及分号也能够省略。

（我我的对于这个特性很是感激，再也不须要输入function这几个字符对我而言相当重要，由于我老是不可避免地错误写成functoin，而后我就不得不回过头改正它。）

若是要写一个接受多重参数（也可能没有参数，或者是不定参数、默认参数、参数解构）的函数，你须要用小括号包裹参数list。

// 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.js这样的库提供的函数工具，箭头函数运行起来一样美不可言。事实上，Immutable的文档中的示例全都由ES6写成，其中的许多特性已经用上了箭头函数。

那么不是很是函数化的状况又如何呢？除表达式外，箭头函数还能够包含一个块语句。回想一下咱们以前的示例：

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

这是它们在ES6中看起来的样子：

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

这是一个微小的改进，对于使用了Promises的代码来讲箭头函数的效果能够变得更加戏剧性，}).then(function (result) { 这样的一行代码能够堆积起来。

注意，使用了块语句的箭头函数不会自动返回值，你须要使用return语句将所需值返回。

小提示：当使用箭头函数建立普通对象时，你老是须要将对象包裹在小括号里。

// 为与你玩耍的每个小狗建立一个新的空对象 var chewToys = puppies.map(puppy => {}); // 这样写会报Bug！ var chewToys = puppies.map(puppy => ({})); //

用小括号包裹空对象就能够了。

不幸的是，一个空对象{}和一个空的块{}看起来彻底同样。ES6中的规则是，紧随箭头的{被解析为块的开始，而不是对象的开始。所以，puppy => {}这段代码就被解析为没有任何行为并返回undefined的箭头函数。

更使人困惑的是，你的JavaScript引擎会将相似{key: value}的对象字面量解析为一个包含标记语句的块。幸运的是，{是惟一一个有歧义的字符，因此用小括号包裹对象字面量是惟一一个你须要牢记的小窍门。

这个函数的this值是什么呢？

普通function函数和箭头函数的行为有一个微妙的区别，箭头函数没有它本身的this值，箭头函数内的this值继承自外围做用域。

在咱们尝试说明这个问题前，先一块儿回顾一下。

JavaScript中的this是如何工做的？它的值从哪里获取？这些问题的答案可都不简单，若是你对此倍感清晰，必定由于你长时间以来一直在处理相似的问题。

这个问题常常出现的其中一个缘由是，不管是否须要，function函数总会自动接收一个this值。你是否写过这样的hack代码：

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

在这里，你但愿在内层函数里写的是this.add(piece)，不幸的是，内层函数并未从外层函数继承this的值。在内层函数里，this会是window或undefined，临时变量self用来将外部的this值导入内部函数。（另外一种方式是在内部函数上执行.bind(this)，两种方法都不甚美观。）

在ES6中，不须要再hackthis了，但你须要遵循如下规则：

• 经过object.method()语法调用的方法使用非箭头函数定义，这些函数须要从调用者的做用域中获取一个有意义的this值。
• 其它状况全都使用箭头函数。

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

在ES6的版本中，注意addAll方法从它的调用者处获取了this值，内部函数是一个箭头函数，因此它继承了外围做用域的this值。

超赞的是，在ES6中你能够用更简洁的方式编写对象字面量中的方法，因此上面这段代码能够简化成：

// ES6的方法语法 { ... addAll(pieces) { _.each(pieces, piece => this.add(piece)); }, ... }

在方法和箭头函数之间，我不再会错写functoin了，这真是一个绝妙的设计思想！

箭头函数与非箭头函数间还有一个细微的区别，箭头函数不会获取它们本身的arguments对象。诚然，在ES6中，你可能更多地会使用不定参数和默认参数值这些新特性。

借助箭头函数洞悉计算机科学的风尘往事

咱们已经讨论了许多箭头函数的实际用例，它还有一种可能的使用方法：将ES6箭头函数做为一个学习工具，来深刻挖掘计算的本质，是否实用，终将取决于你本身。

1936年，Alonzo Church和Alan Turing各自开发了强大的计算数学模型，图灵将他的模型称为a-machines，可是每个人都称其为图灵机。Church写的是函数模型，他的模型被称为lambda演算（λ-calculus）。这一成果也被Lisp借鉴，用LAMBDA来指示函数，这也是为什么咱们如今将函数表达式称为lambda函数。

但什么是lambda演算呢？“计算模型”又意味着什么呢？

用 几句话解释清楚很难，可是我会努力阐释：lambda演算是第一代编程语言的一种形式，但毕竟存储程序计算机在十几二十年后才诞生，因此它本来不是为编程 语言设计的，而是为了表达任意你想到的计算问题设计的一种极度简化的纯数学思想的语言。Church但愿用这个模型来证实广泛意义的计算。

最终他发现，在他的系统中只须要一件东西：函数。

这种声明方式无与伦比，不借助对象、数组、数字、if语句、while循环、分号、赋值、逻辑运算符甚或是事件循环，只须使用函数就能够从0开始重建JavaScript能实现的每一种计算。

这是用Church的lambda标记写出来的数学家风格的“程序”示例：

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

等效的JavaScript函数是这样的：

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

因此，在JavaScript中实现了一个能够运行的lambda演算，它根植于这门语言中。

Alonzo Church和lambda演算后继研究者们的故事，以及它是如何潜移默化地入驻每一门主流编程语言的，已经远超本文的讨论范围。可是若是你对计算机科学 的奠定感兴趣，或者你只是对一门只用函数就能够作许多相似循环和递归这样的事情的语言倍感兴趣，你能够在一个下雨的午后深刻邱奇数（Church numerals）和不动点组合子（Fixed-point combinator），在你的Firefox控制台或Scratchpad中仔细研究一番。结合ES6的箭头函数以及其它强大的功能，JavaScript称得上是一门探索lambda演算的最好的语言。

我什么时候可使用箭头函数？

早在2013年，我就在Firefox中实现了ES6箭头函数的功能，Jan de Mooij为其优化加快了执行速度。感谢Tooru Fujisawa以及ziyunfei（译者注：中国开发者，为Mozilla做了许多贡献）后续打的补丁。

微软Edge预览版中也实现了箭头函数的功能，若是你想当即在你的Web项目中使用箭头函数，可使用Babel、Traceur或TypeScript，这三个工具均已实现相关功能。