简介

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

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

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

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

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

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

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

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

arguments object

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

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

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

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

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

绑定this的值

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

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

class Cow {
constructor() {
this.sound = "moo";
}
makeSoundLater() {
setTimeout(() => {
console.log(this.sound);
}, 1000);
}
} var myCow = new Cow();
var yourCow = new Cow(); yourCow.sound = "moooooo"; myCow.makeSoundLater();
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”。

隐式返回值

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

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

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

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

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

显示返回值

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

语法


x => y // Implicit return x => { return y } // Explicit return (x, y, z) => { ... } // Multiple arguments (() => { ... })() // 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. Redis学习-持久化机制

    Redis持久化的意义 在于故障恢复 比如你部署了一个redis,作为cache缓存,当然也可以保存一些较为重要的数据 如果没有持久化的话,redis遇到灾难性故障的时候(断电.宕机),就会丢失所有的 ...

  2. rsync如何不指定密码文件

    平时用rsync做数据同步时,都是通过--password-file指定一个密码文件 这个密码文件权限要求比较高,一般是600,属主属组都是rsync命令执行者 如果是在脚本中执行rsync,比如定时 ...

  3. ElasticSearch(十一)Elasticsearch清空指定Index/Type数据

    POST /index_name/type_name/_delete_by_query?conflicts=proceed { "query": { "match_all ...

  4. 原创《weex面向未来的架构》

    最近一直在做weex的调研工作,整理之后给公司做了一次技术分享. 分享内容如下: 1:Weex是什么? 2:  Weex目前能做什么? 3:  Weex 如何调试 4:  剖析一下Weex原理 5: ...

  5. 从头推导与实现 BP 网络

    从头推导与实现 BP 网络 回归模型 目标 学习 \(y = 2x\) 模型 单隐层.单节点的 BP 神经网络 策略 Mean Square Error 均方误差 \[ MSE = \frac{1}{ ...

  6. 详解docker中容器devicemapper设备的挂载流程

    事故起因 版本说明:本文中docker版本主要基于1.10版本,操作系统为centos7.devicemapper在文中缩写为dm. 某个用户的容器启动不起来,启动时候一直报错.通过docker lo ...

  7. iperf详细使用方法

    Iperf  是一个网络性能测试工具.Iperf可以测试TCP和UDP带宽质量.Iperf可以测量最大TCP带宽, 具有多种参数和UDP特性.Iperf可以报告带宽,延迟抖动和数据包丢失. Iperf ...

  8. java代码块,静态代码块,静态变量,构造方法执行顺序

    一个类中执行顺序: 静态变量静态代码块代码块构造方法 子类和父类执行顺序: 父类静态变量父类静态代码块子类静态变量子类静态代码块父类代码块父类构造方法子类代码块子类构造方法 直接看代码,一目了然. p ...

  9. ajax错误类型大全

    https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html ajax错误类型大全

  10. rabbitmp安装记录

    第一次安装一路遇坑,安装步骤及问题如下 1:安装erlang依赖 yum -y install make gcc gcc-c++ kernel-devel m4 ncurses-devel opens ...