[整理][探秘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))  ;; 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 

原网址: 访问
创建于: 2018-10-13 16:48:27
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论