简介

JavaScript 中,函数可以用箭头语法(”=>”)定义,有时候也叫“lambda表达式”。这种语法主要意图是定义轻量级的内联回调函数。例如:

  1. // Arrow function:
  2. [5, 8, 9].map(item => item + 1); // -> [6, 9, 10]
  3. // Classic function equivalent:
  4. [5, 8, 9].map(function(item) {
  5. return item + 1;
  6. }); // -> [6, 9, 10]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

当箭头函数有一个参数时,参数两边的括号是可有可无的,但是还是有括号看起来看清楚。

  1. const foo = bar => bar + 1;
  2. const bar = (baz) => baz + 1;
  • 1
  • 2

箭头函数不带参数时,必须要用括号,比如:

  1. const foo = () => "foo";
  • 1

如果函数体不是只一行,应该用花括号,并显式地返回(如果需要返回值)。

  1. const foo = bar => {
  2. const baz = 5;
  3. return bar + baz;
  4. };
  5. foo(1); // -> 6
  • 1
  • 2
  • 3
  • 4
  • 5

arguments object

箭头函数不会暴露 argument 对象,所以,argument 将简单地指向当前scope内的一个变量。

arguments object 是所有函数中的一个本地变量。你可以通过 arguments 对象引用函数的入参。这个对象包含传给这个函数的每个入参的入口,索引从0开始,例如: 
arguments[0] 
arguments[1] 
arguments[2]

  1. const arguments = [true];
  2. const foo = x => console.log(arguments[0]);
  3. foo(false); // -> true
  • 1
  • 2
  • 3
  • 4

基于此,箭头函数也不知道它的调用者。 
当缺少arguments object时,可能会有所限制(极少数情况),其余的参数一般可以做为替代。

  1. const arguments = [true];
  2. const foo = (...arguments) => console.log(arguments[0]);
  3. foo(false); // -> false
  • 1
  • 2
  • 3
  • 4

绑定this的值

箭头函数是 lexically scoped,这意味着其 this 绑定到了附近scope的上下文。也就是说,不管this指向什么,都可以用一个箭头函数保存。

看下面的例子, Cow 类有一个方法在1秒后输出sound。

  1. class Cow {
  2. constructor() {
  3. this.sound = "moo";
  4. }
  5. makeSoundLater() {
  6. setTimeout(() => {
  7. console.log(this.sound);
  8. }, 1000);
  9. }
  10. }
  11. var myCow = new Cow();
  12. var yourCow = new Cow();
  13. yourCow.sound = "moooooo";
  14. myCow.makeSoundLater();
  15. yourCow.makeSoundLater();
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

在 makeSoundLater() 方法中,this 指向当前 Cow 对象的实例。所以在这个例子中当我们调用 myCow.makeSoundLater(), this 指向 myCow。然后,通过使用箭头函数,我们保存了 this,这样我们就可以在需要时引用 this.sound 了。将会输出 “moo”,而不是yourCow.makeSoundLater()输出的“moooooo”。

隐式返回值

箭头函数可以通过省略掉小括号做到隐式返回值。

  1. const foo = x => x + 1;
  2. foo(1); // -> 2
  • 1
  • 2

当使用隐式返回时,Object Literal 必须用花括号括起来。

Object Literal 是用花括号括起来的,分号隔开的 k-v 对象列表。

  1. const foo = () => { bar: 1 } // foo() returns undefined
  2. const foo = () => ({ bar: 1 }) // foo() returns {bar: 1}
  • 1
  • 2

显示返回值

  1. const foo = x => {
  2. return x + 1;
  3. }
  4. foo(1); // -> 2
  • 1
  • 2
  • 3
  • 4
  • 5

语法


  1. x => y // Implicit return
  2. x => { return y } // Explicit return
  3. (x, y, z) => { ... } // Multiple arguments
  4. (() => { ... })() // Immediately-invoked function expression

arrow function的更多相关文章

  1. 廖雪峰js教程笔记5 Arrow Function(箭头函数)

    为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 箭头函数 阅读: ...

  2. JavaScript学习笔记(十二)——箭头函数(Arrow Function)

    在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...

  3. ES6 new syntax of Arrow Function

    Arrow Function.md Arrow Functions The basic syntax of an arrow function is as follows var fn = data ...

  4. arrow function and bind

    Can you bind arrow functions? https://stackoverflow.com/questions/33308121/can-you-bind-arrow-functi ...

  5. JS面试Q&A(续2): Rest parameter,Arrow function 等

    rest parameter 和 Destructuring assignment. function fun1(...theArgs) { console.log(theArgs.length);} ...

  6. arrow function、function.apply

    An arrow function expression has a shorter syntax than a function expression and does not have its o ...

  7. Arrow function restore

    Arrow function restore 为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { r ...

  8. [ES6] 06. Arrow Function =>

    ES6 arrow function is somehow like CoffeeScirpt. CoffeeScript: //function call coffee = -> coffee ...

  9. 10th week task -3 Arrow function restore

    Arrow function restore 为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { r ...

随机推荐

  1. CentOS7开放端口号

    查看所有开放的端口号 firewall-cmd --zone=public --list-ports 或者 firewall-cmd --permanent --list-ports(--perman ...

  2. ssh到虚拟机---一台主机上

    问题描述:我们需要ssh来编辑虚拟机中的文件,以此提高工作效率.但是新建的虚机一般来说没有开启ssh服务,所以需要在虚拟机上开启ssh服务. 1)检查是否安装了SSH rpm -qa |grep ss ...

  3. Linux系统 磁盘IO过高排查总结

    最近做的一个电商网站因为磁盘 I/O 过高导致访问速度奇慢,问题存在两个月有余未得到解决办法.此次排查原因的经验可以作下次问题的参考. 1.会看懂 top 系统命令出来的各项参数.此次是无意中发现 u ...

  4. 单元测试系列之五:Mock工具之Mockito实战

    更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢! 原文链接:http://www.cnblogs.com/zishi/p/6780719.html 在实际项目中写单 ...

  5. MySQL explain执行计划优化

    https://www.linuxidc.com/Linux/2016-04/129965.htm

  6. JavaWeb网上商城项目中sql语句问题的解决

    出现的问题 解决方法 对ProductDaoImpl建立Junit测试得到问题所在 学到了 Junit case测试验证和debug分步执行 mysql是关系型数据库.Redis是非关系型数据库且比m ...

  7. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建列组合

    jQuery EasyUI 数据网格 - 创建列组合 easyui 的数据网格(DataGrid)可以创建列组合,如下所示: 在本实例中,我们使用平面数据来填充数据网格(DataGrid)的数据,并把 ...

  8. Python自学:第三章 动手试一试 3-4、3-5

    # -*- coding: GBK -*- liebiao = ["zhang", "li", "wang", "zhou&quo ...

  9. retina屏 适配问题

    物理像素(physical pixel) 一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值. 设备独立像素(density-indepe ...

  10. hdu-1536 S-Nim SG函数

    http://acm.hdu.edu.cn/showproblem.php?pid=1536 给出能够取的方法序列,然后求基本石子堆问题. 只要用S序列去做转移即可. 注意has初始化的一些技巧 #i ...