箭头函数以及this指向问题

一、定义函数的方式

//1.function
const aaa = function () {

}
//2.对象字面量中定义函数
const obj = {
    bbb() {

    }
}
//3.ES6中的箭头函数
const ccc = (参数) => {

}

二、箭头函数的参数和返回值

1、参数问题

//1.1两个参数
const sum = (num1, num2) => {
    return num1 + num2
}
//1.2一个参数（括号可以省略）
const power = num => {
    return num * num
}

2、返回值

//2.1代码块中有多行代码时正常写

const test = () => {
    console.log('11111')
    console.log('22222')
}
//2.2代码块中有一行代码时省略大括号
const power = num => num * num

三、箭头函数中的this

//1.什么时候使用箭头函数函数：当把一个函数作为另一个函数的参数的时候
setTimeout(function () {
    console.log(this) //window
},1000)

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

const obj = {
    aaa() {
        setTimeout(function () {  //函数调用是通过call，call会把window作为第一个参数传进去
            console.log(this) //window
        })

        setTimeout(() => { //箭头函数没有自己的this，只会一层一层向外查找
            console.log(this) //aaa obj对象
        })
    }
}
obj.aaa()

const obj = {
    aaa() {
        setTimeout(function () {  //函数调用是通过call，call会把window作为第一个参数传进去
            setTimeout(function (){
                console.log(this) //window
            })

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

        setTimeout(() => { //箭头函数没有自己的this，只会向外作用域一层一层向外查找
            setTimeout(function (){
                console.log(this) //window
            })

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

总结：

箭头函数没有自己的this，他是在定义函数的时候绑定的，而不是在执行过程中绑定的，它继承了定义函数的对象，例如：

function Person () {
    this.name = 'lihh',
    this.age = 18,
    setInterval(() => {
        console.log (this)
        console.log('我叫' + this.name + '今年' + this.age)
    }, 1000);
}

let p = new Person()

打印结果是this指向了Person

再看下面这种非箭头函数：

function Person () {
    this.name = 'lihh',
    this.age = 18,
    setInterval(function () {
        console.log (this)
        console.log('我叫' + this.name + '今年' + this.age)
    }, 1000);
}

let p = new Person()

打印结果是this指向了window，这是由于setInterval跟setTimeout调用的代码运行在与所在函数完全分离的执行环境上。这会导致这些代码中包含的 this 关键字会指向 window (或全局)对象。

四、使用箭头函数的好处

1.解决了匿名函数的this指向问题

上面例子打印结果为undefined，是因为此时this指向的是window对象，然而window对象上面并没有绑定name和age属性，所以找不到

五、什么时候不能使用箭头函数

（待补充）