arrow function

简介

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