js中箭头函数指向问题,我终于弄明白啦!(简单直接易懂)

最近在准备前端的面试,遇到了this指向问题,所以在这里也做一个简单的笔记。
首先不了解箭头函数的基本用法的可以先看看这个:

箭头函数基本用法

1、先说结论。

箭头函数没有他自己的this,它的this是父亲的this,也就是说父亲的this变化了,那么它自己的this也会跟着变化。

2、用例子说话。

var name = "222";
var obj={
name:"111",
func1:()=>{
console.log(this.name);
}
}
obj.func1(); //result:222

解释:因为箭头函数的this指向的是abj的指向 ,abj指向的是全局。

var name = "333";
        var obj = {
            name: "222",
            clickBind: function() {
                var name = "111";
                let arrow = () => {
                    console.log(this.name);
                };
                arrow();
            }
        };
        var bb = obj.clickBind;
        bb(); //333
        

解释:因为箭头函数this和clickbid中的作用域是一样的,再看bb,bb=clickBind,然后bb()就是调用clickBind();

变形

var name = "333";
        var obj = {
            name: "222",
            clickBind: function() {
                var name = "111";
                let arrow = () => {
                    console.log(this.name);
                };
                arrow();
            }
        };
       obj.clickBind();//222
  
        

解释:因为因为箭头函数this和clickbid中的作用域是一样的,clickbid的this是obj。所有结果是obj里面的222呀。

总结:

其实大部分情况下可以用一句话来概括,this总是指向调用该函数的对象。
但是对于箭头函数并不是这样,是根据外层(函数或者全局)作用域(词法作用域)来决定this。
对于箭头函数的this总结如下:
箭头函数不绑定this,箭头函数中的this相当于普通变量。
箭头函数的this寻值行为与普通变量相同,在作用域中逐级寻找。
箭头函数的this无法通过bind,call,apply来直接修改(可以间接修改)。
改变作用域中this的指向可以改变箭头函数的this。
eg. function closure(){()=>{//code }},在此例中,我们通过改变封包环境closure.bind(another)(),来改变箭头函数this的指向。

参考的文章:https://www.jianshu.com/p/ffc20c6ff0e8 https://www.jianshu.com/p/5cf95d8217bf

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值