关于javascript this的困惑

代码1:

var obj = {
    name:'xxx',
    getThis:function(){
        console.log(this)
    }
}
obj.getThis()

代码2:

var obj = {
    name:'xxx',
    getThis:()=>{
        console.log(this)
    }
}
obj.getThis()

代码1输出obj本身,代码2输出window

代码3:

function Foo(name){
    this.name = name
    this.getThis = function(){
        console.log(this)
    }
}
var f = new Foo('xxx')
f.getThis()

代码4:

function Foo(name){
    this.name = name
    this.getThis = ()=>{
        console.log(this)
    }
}
var f = new Foo('xxx')
f.getThis()

我不理解,为什么代码3与代码4输出的this都是f。代码4不是应该输出window吗?

阅读 354
评论 更新于 3月23日
    3 个回答
    fengxh
    • 523

    3中f.getThis,方法的调用者是f,所以this指向f

    const func = f.getThis;
    func(); // return window or global

    4中arrow function不维护this,它的this是Foo构造函数里的this,所以指向实例

    const func = f.getThis()
    func(); // return f
    评论 赞赏 3月23日

      代码4的 this 绑定到对象 f 上了,() => 表达式是绑定到当前对象,所以输出的是 f

      评论 赞赏 3月23日
        琴亭夜雨
        • 5
        • 新人请关照

        楼主,你这样记住吧,凡是用构造函数创建对象,无论用何种方式,this指向的永远都是声明的创建的对象变量,但是用“对象字变量”,this指向箭头函数和普通函数稍有区别

        评论 赞赏 3月25日
          撰写回答

          登录后参与交流、获取后续更新提醒