箭头函数的this指向

声明:call、apply、bind无法改变箭头函数的this指向
例如:

const fun1 = ()=>{
    console.log(this === window)
}
const person = {
    name:'tom'
}
fun1()  // true
fun1.apply(person)  // true
fun1.bind(person)  // true
fun1.call(person)  // true

可以看到箭头函数在这里初始的时候指向window,使用apply、bind、call来尝试改变它的指向,都失败了,始终指向window
结论箭头函数指向为它的爷爷对象。也就是父级的父级对象。
证明:

const obj = {
    name:'obj',
    fun1:function (){
        return setTimeout(()=>{
            console.log(this.name)
        },1000)
    }
}
const person = {
    name:'person',
    age:'22'
}
obj.fun1() // obj
obj.fun1.apply(person)  //person

可以看到,我们在setTimeout中调用箭头函数,setTimeout为全局函数,它指向的是window,然后我们是在obj对象里面的调用setTimeout,箭头函数的this指向父级的父级,在这里也就是指向了obj
在这里插入图片描述

前面说到,我们不能改变箭头函数的指向,但是我们可以改变它父级的父级的指向,由于箭头函数指向父级的父级,也就代表着我们改变了箭头函数的指向。例子里面我们改变了fun1的指向,成功改变了箭头函数的指向。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值