ES6中的箭头函数，一看就会，很简单的东西

1.简介

先上图，再解释，红色圈出来的是参数，黄线划出来的是代码，箭头函数简单的说，就是把function改成了=>，知道这个，你已经会用箭头函数了

把上面代码的运行结果也发过来，两小截代码功能是一样的

2.简化

如果参数只有一个的话，可以省略小括号。

如果代码只是一行的话，可以省略大括号，但是会默认返回值。

    //原代码
    const a1 = function (num) {
        return num*(num+1);
    };
    //只有一个参数的时候，可以省略小括号
    const a2 = num => {
        return num*(num+1);
    };
    //只有一行代码的时候，可以省略大括号和return
    const a3 = num => num*(num+1);
    
    //如果代码没有返回值，会return一个undefined
    const a4 = num => console.log('Hello World');

    console.log(a1(1),a2(2),a3(3),a4(4))

主要是只有一行代码的时候，注意return的问题。

有return的时候，会省略return，还是返回

没有return的时候，就返回undefined

上面的代码运行结果：

3.参数this

function中的this代表的window

箭头函数中的this代表的是离他最近的作用域中的this

    //打印出来的是window
    const a1 = setTimeout(function () {
        console.log(this)
    },1000)
    //打印出来的也是window,外加一个undefined
    const a2 = setTimeout(() => {
        console.log(this)
    },2000)
    const a3 = {
        //打印出来的是window
        aaa(){
            setTimeout(function () {
                console.log(this)
            },3000)
        },
        //打印出来的是a3,外加一个undefined
        bbb(){
            setTimeout(() => {
                console.log(this)
            },4000)
        }
    }
    console.log(a3.aaa(),a3.bbb())

运行结果

箭头函数a2，由于离他最近的就是window，所以打印出来的this就是window

箭头函数a3.bbb，由于离他最近的作用域是a3对象，所以打印出来的就是a3

最上面两个undefined，是由于两个箭头函数都没有返回值，所以先打印了undefined