ES6中的箭头函数详细梳理

一、箭头函数的介绍

1.1 什么是箭头函数

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

1.2 基本语法

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

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

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

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

1.3 箭头函数的参数

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

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

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

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

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

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

1.4 箭头函数的函数体

①如果箭头函数的函数体只有一句执行代码，简单返回某个变量或者返回一个简单的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;
};

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

//错误写法—花括号会被解释为函数体
    let getItem = id => {
        id: id,
        name: 'gaby'
    };
//正确写法
    let getItem = id => ({
        id: id,
        name: 'gaby'
    });

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

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

箭头函数用于回调函数，常见简洁

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


//栗子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);

二、箭头函数的this指向规则

2.1 箭头函数没有原型prototype，因此箭头函数没有this指向

    let fn = () => {
        console.log('Hello World !')
    };
    console.log(fn.prototype); // undefined

2.2 箭头函数不会创建自己的this，如果存在外层第一个普通函数，在定义的时候会继承它的this

箭头函数没有自己的this指向，它会捕获自己定义所处的外层执行环境，并且继承这个this值。箭头函数的this指向在被定义的时候就确定了，之后永远都不会改变。（&#x