假设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绑定到text上，那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);