this的题目，我都是这样理解的，，除了箭头函数，this的指向就看它的直接调用者是谁！而箭头函数就找它外面第一个不是箭头函数的函数。

假设document是HTML文档中的一个节点，点击该节点后会发生什么？

function test() {
  this.flag = false;
  this.change = () => {
    this.flag = true;
    console.log(button.flag);
  };
}
const button = new test();
document.addEventListener("click", button.change);

A
输出true

B
输出false

C
输出undefined

D
报错

正确答案：A

首先需要明白addEventListener的回调函数的函数上下文为触发事件的元素的引用，
如无意外则change方法改变的flag是节点上的flag，和button无关，
但是由于change是箭头函数，this与构造函数绑定在一起了，所以改变的flag是button的flag。

this的题目，我都是这样理解的，，除了箭头函数，this的指向就看它的直接调用者是谁！而箭头函数就找它外面第一个不是箭头函数的函数。

题目中调用button.change，所以去分析change(),而难点就在于 this.flag = true;的this是谁？
当看到change是一个箭头函数的this时，就什么也不要考虑，就去找外面第一个不是箭头函数的函数，
也就是说，他会把this绑定到test上，那this.flag = true;就意味着text()的实例中的flag会变成true，所以button.flag为true

()=>函数里面的this跟外面的函数指向同一个，也就是说当调用chang方法时，this.flag=true实际是将外面的this.flag=false的值改了

当test实例化为button时会在实例中重新创建一个新的change箭头函数而不是把change指向原型对象里面的change 实例里面的
change因为是箭头函数所以this指向永远指向button实例

箭头函数没有this,如果使用了this,this指向父级作用域上下文。遇到箭头函数里使用this，你要看它的父级是不是函数，如果是，它就指向父级作用域的this。如果它的父级不是函数，就继续往上找，能找到函数，this就指向找到的函数的作用域，如果往上找父级找不到函数，就指向window.

 function test() {//构造函数中的this指向实例化对象。   
   
      this.flag = false;   
   
      this.change = () => {    //看这里，this.change也就是button.change，它是一个函数，是有作用域的。   
   
        this.flag = true;     //所以此处的this.flag相当于button.flag   即button.flag=true;   
   
        console.log(button.flag);   
   
      };   
   
    }   
   
    const button = new test();   
   
    document.addEventListener("click", button.change);

__EOF__

本文作者：龙陌
本文链接：https://www.cnblogs.com/longmo666/p/17832287.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！