箭头函数的使用的this指向

前言：箭头函数也是一种创建函数的方法。这是ES6中一种创建函数的方法

ES6中的箭头函数

什么时候使用箭头函数最多？

当我们准备把一个函数作为参数传到另外一个函数里面的时候用的最多

创建

const 函数名 = （参数列表）=> {}

参数问题

无参数

const aaa = () => {
    return hhhh
}

放入两个参数

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

放入一个参数

const cheng = (num) =>{
    return num*num
}

可以省去括号( )

const cheng = num =>{
    return num*num
}

箭头函数的结构

函数代码块中有多行代码

这时就可以照常写

const aaa = () => {
    console.log('好好学习');
    console.log('天天向上');
}

函数代码块中只有一行代码

这时有更简洁的书写方式。变换啦！

const sum = (num1,num2) =>{
    return num1 + num2  //这里只有一行代码
}

//可以这么写啦！
const sum = (num1,num2) => num1 + num2 

此时 **=>**后面的式子会作为一个返回值返回给函数

const bbb = () => console.log("我爱学习")
//调用bbb()
console.log(bbb());

这时调用bbb（）时，会先把“我爱学习”打印出来，因为console.log是没有返回值的，所以第二步会把undefined 打印出来。

箭头函数中this的使用

箭头函数中的this是如何查找的？

向外层作用域中，一层层查找this，直到this有定义。

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

setTimeout(()=> {
            console.log(this)  //window
            })

const obj = {
    aaa() {
        setTimeout(function (){
            setTimeout(function() {
                console.log(this);  //window
            })

            setTimeout(()=> {
            console.log(this)  //window
            })
        })

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

            setTimeout(() => {
                console.log(this);  //obj
            })
        })
    }
}

总结：匿名函数中的this是window，而箭头函数中的this会往外找，如果外层是匿名函数那就是this，如果外层还是箭头函数那就再往外找。