资讯频道 → Web前端
阅读更多

0顶
0踩

Web前端

原创新闻 【探秘ES6】系列专栏（七）：箭头函数

2015-07-09 15:22 by 副主编 mengyidan1988 评论(0) 有4395人浏览
javascript ES6

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

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
0
顶
0
踩
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • shell 几种字符串加解密方法

    用 gtalk@gmail.com 作为明文，加密分两步，当然了，也是可以一步过的，呆会说～得到：137514765985002236391382606438443478282。得到：137514765985002236391382606438443478282。第二种：〔 应该是纯 Bash Shell，含 VIM 的 xxd 〕第三种：〔 Base64 编码，这个很好很强大，适合写加密脚本 〕得到：gtalk@gmail.com。得到：gtalk@gmail.com。dc -e 输出的数字P。

  • 脚本加密解密

    shell脚本是维护Linux系统的一个必不可少的工具，简单、便捷、可以执行强。但是shell脚本内会存储一些隐私信息（如系统账号、密码，应用程序账号、密码，IP，数据存放路径等等），以明文的形式存放，会造成信息泄露。因此有必要对脚本进行加密，以加强文件的安全性。

  • Shell文件加解密

    shell脚本文件加解密以及使用

  • 【笔记】linux脚本的简单加密和解密

    gzexe加密（压缩）和解密（解压） 例子：test.sh脚本 1.加密 使用gzexe命令，它会把原来的文件备份为 test.sh~ ,同时 test.sh 即被变成加密后的可执行文件 gzexe test.sh 2.解密 查看脚本，找到 “skip=44”，这里44就表示从44行开始是被加密过的，只需要把44行之后的内容重新生成一个压缩文件即可。 （1）.在当前目前生成压缩文件：...

  • linux脚本解密,给shell脚本加密和解密的shell脚本

    加密脚本内容：#!/bin/bashwhile read line;doecho $line|tr [a-m][n-z][A-M][N-Z][0-4][5-9] [n-z][a-m][N-Z][A-M][5-9][0-4]done$1.shrm -rf $1mv $1.sh $1chmod +x $1解密脚本内容：#!/bin/bashwhile read line;doecho $line|tr...

  • 准备写一篇shell 脚本 (shell script)的加密与解密，有人看吗？

    准备写一篇shell 脚本 (shell script)的加密与解密，有人要约稿吗

  • linux脚本解密,shell脚本加密与解密

    我们写的shell脚本里面通常会包含帐号密码等信息或者你不想让别人看到的信息，那么把写好的shell脚本进行简单的加密显得有些必要了。常用的shell加密方法有两种，一种是通过gzexe加密，另一种是通过shc加密。我们先给一个简单的脚本，然后用它来进行加密解密演示，脚本abc.sh内容如下#!/bin/bashecho"helloworld!"gzexe加密与解密shell脚本shell&...

  • shell脚本简单密码加密

    #!/bin/sh #输入密码 echo "请输入原密码：" read resultFirst firstPWD=$resultFirst echo "请再次输入原密码：" read resultSecond secondPWD=$resultSecond result="" output="" function encryptPWD() { for ((i=0;i<${#firstPWD}

  • MD5加密、Base64和DES可加密解密

    在做项目的过程中，一般都会涉及到用户名和密码。而这个时候密码就需要加密一下，在这里我就用Md5加密了。而很多人会有这个疑问，Md5可以在线转换，是的，的确可以在线转换，那么你可以试试多加密几次，这样在线工具解密的难度就会大大增大。而Base64和DES可加密也可解密，上代码。1、Md5加密。 1 static void Main(string[] args) 2 { 3 //在这里我加...

  • Powershell脚本加密与解密

    网上查了powershell 加密解密的方法，有把ps脚本加密成bat的，有加密成bin的，尝试了一下，都的可以，有的不行。 我们项目中用到一个这样的脚本加密的，代码半天就写完了，加密的事情纠结了一星期，最终纠结在那个有名的加密的博客，没解释清楚如何传参进去到Invoke-Expression中，尝试了Invoke-command也没解决。 我传参的原因很简单，ps中的代码有取得当前路径的，我...

  • 脚本加密与解密

    脚本加密与解密JScript.Encode: http://www.vvss.net/tools/encode.htmunescape: http://www.vvss.net/tools/unescape.htm

  • 破解Linux环境下Shell脚本加密的几种思路

    原文地址::https://qblog.org/manual/linux-shell-decode.html 前一阵发布关于一键云免的文章《网易蜂巢CentOS6.7搭建OpenVPN云免服务器及手机端使用教程》，里面的一键安装包源码是经过解密后得来的，有不少博友联系我告知解密的方法，其实，博主解密都是4-5月份的代码，6月份后的骚逼汪的安装代码都是转换成二进制可执行的linux

  • shell 加密

    #加密 openssl enc -e -aes-256-cbc -in 要加密的文件 -out 要解密的文件 -pass pass:密码 #解密 openssl enc -d -aes-256-cbc -in 要解密的文件 -out 要加密的文件 -pass pass:密码...

  • Python项目-自动办公-56 Word_docx_格式套用.zip

    Python课程设计，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。 包含：项目源码、数据库脚本、软件工具等，该项目可以作为毕设、课程设计使用，前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。

  • 《松鼠》生态性课堂体验教案.docx

    《松鼠》生态性课堂体验教案

  • Java系统源码+智慧图书管理系统

    Java系统源码+智慧图书管理系统 内容概要： 本资源包含了完整的Java前后端源码及说明文档，适用于想要快速搭建并部署Java Web应用程序的开发者、学习者。 技术栈： 后端：Java生态系统，包含Spring Boot、Shiro、MyBatis等，数据库使用Mysql 前端：Vue、Bootstrap、Jquery等 适用场景示例： 1、毕业生希望快速启动一个新的Java Web应用程序。 2、团队寻找一个稳定的模板来加速产品开发周期。 3、教育机构或个人学习者用于教学目的或自学练习。 4、创业公司需要一个可以立即投入使用的MVP（最小可行产品）。

  • 基于ssm+jsp实现的超市管理系统高级版v2-lw.zip

    项目包含前后台完整源码。 项目都经过严格调试，确保可以运行！ 具体项目介绍可查看博主文章或私聊获取 助力学习实践，提升编程技能，快来获取这份宝贵的资源吧！

  • 《松鼠》教学方案.docx

    《松鼠》教学方案

Global site tag (gtag.js) - Google Analytics