this到底指向的是谁？箭头函数和普通函数中的this

如果觉得还有点用，请您给我一个赞！您的赞是我坚持下去的动力

var myobj={
  count:1,
  getCount:function(){
    console.log(this);//myobj
  },
  getCountArrow:()=>{
    console.log(this);//window
  },
  getCountArrow2:function(){
    let fn=()=>{ console.log(this) };
    return fn();//myobj
  },
}

myobj.getCount() myobj
myobj.getCountArrow() window
myobj.getCountArrow2() myobj

原理

• 普通函数：在执行的时候才绑定this,就像下面的步骤
  myobj.getCount() ==> myobj.getCount.call(myobj);
  所以getCount内this===myobj

• 箭头函数：在定义的时候就确定this,它的this指向在定义的时候继承自外层第一个普通函数的this。

  • getCountArrow 在定义的时候往外层寻找函数，myobj不是函数，再外层只有window所以this指向window。
  • getCountArrow2内的箭头函数,在定义的时候往外层寻找函数
    函数是 getCountArrow2,所以this指向getCountArrow2所指向的this
    而调用 myobj.getCountArrow2() ==> myobj.getCountArrow2.call(myobj)
    所以 getCountArrow2里的this是myobj,所以箭头函数内的this也是myobj

结合上面的原理以下输出的是

• var fn=myobj.getCount;
  fn() ==> window.fn() ==> fn.call(window) window

• var fn=myobj.getCountArrow2;
  fn() ==> window.fn() ==> fn.call(window) ==> getCountArrow2内部的this === window ==> 箭头函数this===window window

如果觉得还有点用，请您给我一个赞！您的赞是我坚持下去的动力