前端学习之ES6箭头函数

一、箭头函数的用法

        在没碰着箭头函数之前啊，咱也有定义函数的方法，也就是用function

const sum = function (num1, num2) {
    return num1 + num2
}

这是最传通的写法了，当然，也还有一些其它样子的，但也都是用function，说实话，大同小异。

        然后，就是在ES6里边，定义了一种新的函数写法，就是箭头函数，作用是为了简化代码，这里先写个例子和上边function的写法对应一下

const sum = (num1, num2) => {
    return num1 + num2
}

初略看上去，也就很好理解，二者也差不多，基本上就是把function变成了这个小箭头=>。

        不同的是，箭头函数在一些情况下，可以有简便的写法，下面总结一下

1.在只传一个参数的情况下

        举例

const num = (num) => {
    console.log(num)
}

 这种一个参数的情况下，就可以变成下面这种样子

const num = num => {
    console.log(num)
}

也就是把那个小括号除掉。

2.在只需要返回一行代码的情况下

        还是先举例

const sum = (num1, num2) => {
    return num1 + num2
}

 像这种返回一句代码的情况，就可以省略return 和大括号直接返回

const sum = (num1, num2) => num1 + num2

        其实也就这两种简便写法，可以结合使用，就是又传一个参数，又只返回一行代码的情况下，确实也是可以使代码更简洁一点，在一些函数传函数的情况下，箭头函数的运用还是比较多的。

二、箭头函数的this指向问题

        在箭头函数中，还有一个大重点就是它的this指向 ，原来在学ES6语法的时候，就被this指向的问题搞的晕头晕脑的，不过箭头函数中的this指向问题还算比较好理解，我觉得通过下面这个案例就可以很好的表现它的this指向问题

const obj = {
            aaa() {
                //1.
                console.log(this); //obj对象

                //2.
                setTimeout(function() {
                    console.log(this); //window
                });

                //3.
                setTimeout(() => {
                    console.log(this);//obj对象
                })
            }
        }
    obj.aaa()

这个案例是先定义一个对象，在对象里面定义一个aaa函数（这个函数是用ES6对象字面量的增强写法）然后再在里面打印三个this，一个是直接的，一个是装在定时器里面的普通函数里，还有一个是装在定时器的箭头函数里，最后调用aaa函数观察打印结果，分别是obj对象，window，obj对象。

        这里要说的是，箭头函数和其他函数的this指向肯定是不同的，我想，前两种指向应该咱都知道，第一个就是谁调用指向谁，函数aaa被obj调用，自然aaa里的this就指向obj，第二种定时器里面的函数是回调函数，指向window，所以关键就是为什么箭头函数会指向obj对象，这就要给出箭头函数this指向的一个非常权威的定义：箭头函数中的this引用的是它最近一层作用域中的this（所以箭头函数其实没有自己的this）。

        由此定义再回看案例，案例中箭头函数引用的可不就是它上一层aaa函数作用域中的this，也就与第一种情况的this指向的相同的。