【ES6】箭头函数_es6箭头函数

---

一、箭头函数是什么？

ES6 允许使用“箭头”（ => ）定义函数。

let foo = v => v; 

// 上面的箭头函数等同于：

let foo = function(v) {
 return v; }; 
1
2
3
4
5
6

箭头函数(=>）的左边是参数，右边是函数体。

二、用法详解

1.箭头函数的参数

当箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。当只有一个参数时，可以不写圆括号。

let foo = () => 5;
// 等同于
let foo = function () { return 5 };

// 一个参数
let x = x => x

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

2.箭头函数的函数体

当箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用 return 语句返回。

var sum = (num1, num2) => { return num1 + num2; } 
1

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

// 报错
let getTempItem = id => { id: id, name: "Temp" };
// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });
1
2
3
4

当箭头函数只有一行语句，且不需要返回值，可以采用下面的写法，就不用写大括号了。

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

箭头函数可以与变量解构结合使用。

const full = ({ first, last }) => first + ' ' + last;
// 等同于
function full(person) {
 return person.first + ' ' + person.last; } 
1
2
3
4

箭头函数使得表达更加简洁。

const isEven = n => n % 2 == 0;
const square = n => n * n; 
1
2

上面代码只用了两行，就定义了两个简单的工具函数。如果不用箭头函数，可能就要占用多行，而且还不如现在这样写醒目。 箭头函数的一个用处是简化回调函数。

3.箭头函数与普通函数

变量提升

ES5的函数声明方式（存在变量、函数定义提升）：

//形式上可以先使用，再定义。
console.log(sum)
function sum(x, y) {
    return x + y
}
1
2
3
4
5

ES6中，使用let方式定义函数不存在变量提升：

// 报错
console.log(sum)
let sum = function(x, y){
    return x + y
}
1
2
3
4
5

this的指向

普通函数中，this指向调用时的对象

let oBtn = document.querySelector('#btn')
oBtn.addEventListener('click', function () {
     setTimeout(function () {
         console.log(this)
     }, 1000)
  
})
// 结果指向Window对象。因为setTimeout是window.setTimeout()的简写，调用它的对象是Window
1
2
3
4
5
6
7
8

let oBtn = document.querySelector('#btn')
oBtn.addEventListener('click', function () {
     // console.log(this)
     // this指向调用此函数的对象，调用bind()的为oBtn对象，将this绑定到setTimeout函数并输出
     setTimeout(function () {
     // call apply bind
         console.log(this)
     //bind()不会立即执行而是等到1s之后再执行，而call、apply会立即执行
     }.bind(this), 1000)
  
})
// 结果指向oBtn对象
1
2
3
4
5
6
7
8
9
10
11
12

箭头函数中，this指向定义时的对象。

let oBtn = document.querySelector('#btn')
oBtn.addEventListener('click', function () {
    setTimeout(() => {
        console.log(this)
    }, 1000)
})
// 结果指向oBtn对象
1
2
3
4
5
6
7

其实，箭头函数本身没有this，而是继承了外面一层的执行上下文的this

箭头函数不可以作构造函数

//不报错
function People(name, age){
    console.log(this)
    this.name = name
    this.age = age
}
let p1 = new People('Dorothy', 20)
console.log(p1)


//报错
let People = (name, age) => {
    this.name = name
    this.age = age
}
let p1 = new People('Dorothy', 20)
console.log(p1)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

不可以使用arguments对象

//报错
let foo = () => {
    console.log(arguments)
}
foo(1, 2, 3)
1
2
3
4
5

可用rest参数代替arguments对象

//不报错
let foo = (...args) => {
    // console.log(arguments)
    console.log(args)
}
foo(1, 2, 3)
//[1, 2, 3]
1
2
3
4
5
6
7

---

总结

箭头函数有几个使用注意点。
（1）函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。
（2）不可以当作构造函数，也就是说，不可以使用 new 命令，否则会抛出一个错误。
（3）不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
（4）不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。

this 对象的指向是可变的，但是在箭头函数中，它是固定的。