文档章节

【探秘ES6】系列专栏(七):箭头函数

一配
 一配
发布于 2015/11/08 19:13
字数 1342
阅读 147
收藏 3
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 

本文转载自:http://www.csdn.net/article/2015-07-08/2825159-es6-in-depth-arrow-functions

一配
粉丝 35
博文 146
码字总数 117133
作品 0
西城
私信 提问
ES6学习路线图

第一部分:简介 【探秘ES6】系列专栏(一):ES6简介 http://my.oschina.net/1pei/blog/520581 第二部分:let和const, Symbols, 解构赋值, 模版字符串 说明:这一部分各专题之间都比较独立,...

一配
2016/01/18
164
0
【探秘ES6】系列专栏(一):ES6简介

ES6作为新一代JavaScript标准,即将与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解,Mozilla Web开发者博客推出了《ES6 In Depth》系列文章。CSDN已获授权,将持续对该系...

一配
2015/10/22
260
0
【探秘ES6】系列专栏(三):生成器

ES6作为新一代JavaScript标准,即将与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解,Mozilla Web开发者博客推出了《ES6 In Depth》系列文章。CSDN已获授权,将持续对该系...

一配
2015/10/27
154
0
【探秘ES6】系列专栏(六):解构赋值

ES6作为新一代JavaScript标准,已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解,Mozilla Web开发者博客推出了《ES6 In Depth》系列文章。CSDN已获授权,将持续对该...

一配
2015/11/08
116
0
JavaScript之例题中彻底理解this

本文共 2025 字,看完只需 8 分钟 概述 前面的文章讲解了 JavaScript 中的执行上下文,作用域,变量对象,this 的相关原理,但是我后来在网上看到一些例题的时候,依然没能全做对,说明自己有...

前端老手
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

springboot集成elasticsearch-rest-high-level-client的坑

我使用的是Elasticsearch7.2.0,由于官网上推荐使用elasticsearch-rest-high-level-client端集成在springboot所以尝试爬坑。 首先直接引入官网的配置文件 <dependency> <grou...

MuzzyXu
3分钟前
2
0
ECMAScript运算符之《等性运算符》

等性运算符一般用在判断两个变量是否相等的运算。在处理原始值时,这种运算相当简单,涉及对象,任务就稍有点复杂。 性运算符分: 1、等号和非等号用于处理原始值 2、全等号和非全等号用于处...

专注的阿熊
5分钟前
1
0
ssh-keygen -t rsa -C "注释内容,一般为邮件地址",生成的公钥后面会带上注释,这个注释有什么用处呢?

ssh-keygen -t rsa -C "注释内容,一般为邮件地址",生成的公钥后面会带上注释,这个注释有什么用处呢? donhui 发布于 2015/11/12 16:47 阅读 5K+ 收藏 0 答案 1 补充话题 OpenSSH 为什么8...

linjin200
7分钟前
1
0
Proxy用法——让我们创建一个API代理器

什么是Java Proxy? MDN对Proxy 的定义是: Proxy对象用于定义基本操作的自定义行为(如属性查找、赋值、枚举、函数调用等)。 通俗的将,Proxy对象是目标对象的一个代理器,任何对目标对象的...

AiChinaTech
11分钟前
1
0
Nginx--面试基础必会

文章原创于公众号:程序猿周先森。本平台不定时更新,喜欢我的文章,欢迎关注我的微信公众号。 最近一直在更新关于Nginx的系列文章,终于将Nginx的几个关键知识点讲的差不多了。本篇作为Ngi...

程序猿周先森
12分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部