ES6箭头函数详解

一、什么是箭头函数

ES6中允许使用=>来定义函数。箭头函数相当于匿名函数，并简化了函数定义。

二、 基本语法

// 箭头函数
let fn = (name) => {
    // 函数体
    return `Hello ${name} !`;
};

// 等同于
let fn = function (name) {
    // 函数体
    return `Hello ${name} !`;
};

1
2
3
4
5
6
7
8
9
10
11
12

• 箭头函数在语法上比普通函数简洁多。箭头函数就是采用箭头=>来定义函数，省去关键字function

• 函数的参数放在=>前面的括号中，函数体跟在=>后的花括号中

三、箭头函数的参数

①如果箭头函数没有参数，写空括号

//没有参数，写空括号
let fn = () => {
    console.log('hello');
};
1
2
3
4

②如果箭头函数有一个参数，也可以省去包裹参数的括号

//只有一个参数，可以省去参数括号
let fn = name => {
    console.log(`hello ${name}!`)
};
1
2
3
4

③如果箭头函数有多个参数，将参数依次用逗号(,)分隔，包裹在括号中。

let fn = (val1, val2, val3, val4) => {
    return [val1, val2, val3, val4];
}
1
2
3

四、 箭头函数的函数体

①如果箭头函数的函数体只有一句执行代码，简单返回某个变量或者返回一个简单的js表达式，可以省去函数体花括号{ }

//返回某个简单变量val
let f = val => val;
// 等同于
let f = function (val) { return val };


//返回一个简单的js表达式num1+num2
let sum = (num1, num2) => num1 + num2;
// 等同于
let sum = function(num1, num2) {
  return num1 + num2;
};
1
2
3
4
5
6
7
8
9
10
11
12

②如果箭头函数的函数体只有一句代码，返回的不是变量和简单的js表达式，而是一个对象。

//错误写法—花括号会被解释为函数体
let getItem = id => {
    id: id,
    name: 'gaby'
};
//正确写法
let getItem = id => ({
    id: id,
    name: 'gaby'
});
1
2
3
4
5
6
7
8
9
10

③如果箭头函数的函数体只有一条语句且不需要返回值（最常用于回调函数），加上void关键字

let fn = () => void doesNotReturn();
1

五、箭头函数常见用法

5.1. 用于回调函数

//栗子1
//普通函数
[1, 2, 3].map(function (x) {
    return x + x;
});
//ES6箭头函数
[1, 2, 3].map(x => x + x);
1
2
3
4
5
6
7

//栗子2
//普通函数
var result = [2, 4, 5, 1, 6].sort(function (a, b) {
    return a - b;
});
//ES6箭头函数
var result = [2, 4, 5, 1, 6].sort((a, b) => a - b);
1
2
3
4
5
6
7

5.2. 使用条件（三元）运算符

var simple = a => a > 15 ? 15 : a;
simple(16); // 15
simple(10); // 10

let max = (a, b) => a > b ? a : b;
1
2
3
4
5

5.3. 箭头函数递归

var fact = (x) => ( x==0 ?  1 : x*fact(x-1) );
fact(5);       // 120
1
2

六、箭头函数的特点

6.1. 箭头函数在参数和箭头之间不能换

var func = ()
           => 1;
// SyntaxError: expected expression, got '=>
1
2
3

6.2. 箭头函数没有this

箭头函数this为父作用域的this，不是函数调用的this
箭头函数的this永远指向父作用域，call、apply、bind也改变不了。而普通函数的this指向调用它的那个对象。

//函数this指向window
let test = ()=>console.log(this)
test()//window
//对象中this指向
let obj = {
    name: 'jeck',
    test1: function(){console.log(this)},
    test2: ()=>console.log(this)
}
obj.test1()//{name: "jeck", test1: ƒ, test2: ƒ}
obj.test2()//window
1
2
3
4
5
6
7
8
9
10
11

6.3. 不能通过 call 或 apply 调用

由于 箭头函数没有自己的 this 指针，通过 call() 或 apply() 方法调用一个函数时，只能传递参数（不能绑定 this），他们的第一个参数会被忽略。（这种现象对于 bind 方法同样成立）

6.4. 不绑定arguments

在普通函数中可以使用arguments来获取实际传入的参数值，但是在箭头函数中，我们却无法做到这一点。

const fn = () => {
    console.log(arguments);
};
fn(1, 2); // Uncaught ReferenceError: arguments is not defined
1
2
3
4

• 因为无法在箭头函数中使用arguments，同样也就无法使用caller和callee属性。
• 虽然我们无法通过arguments来获取实参，但是我们可以借助rest运算符（…）来达到这个目的。

const fn = (...args) => {
    console.log(args); 
};
fn(1, 2); // [1, 2]
1
2
3
4

6.5. 箭头函数不能用作构造函数，和 new一起用会抛出错误。

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor
1
2

6.6. 箭头函数没有prototype属性

var Foo = () => {};
console.log(Foo.prototype); // undefined
1
2

6.7. 箭头函数不能使用 yield 关键字

yield 关键字通常不能在箭头函数中使用（除非是嵌套在允许使用的函数内）。因此，箭头函数不能用作函数生成器。

七、 更多示例

// 空的箭头函数返回 undefined
let empty = () => {};

(() => 'foobar')();
// Returns "foobar"
// (这是一个立即执行函数表达式，可参阅 'IIFE'术语表)


var simple = a => a > 15 ? 15 : a;
simple(16); // 15
simple(10); // 10

let max = (a, b) => a > b ? a : b;

// Easy array filtering, mapping, ...

var arr = [5, 6, 13, 0, 1, 18, 23];

var sum = arr.reduce((a, b) => a + b);
// 66

var even = arr.filter(v => v % 2 == 0);
// [6, 0, 18]

var double = arr.map(v => v * 2);
// [10, 12, 26, 0, 2, 36, 46]

// 更简明的 promise 链
promise.then(a => {
  // ...
}).then(b => {
  // ...
});

// 无参数箭头函数在视觉上容易分析
setTimeout( () => {
  console.log('I happen sooner');
  setTimeout( () => {
    // deeper code
    console.log('I happen later');
  }, 1);
}, 1);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42