事件绑定的this问题

Question

alpha方法挂在实例上beta方法挂在原型上它们打印出来的this却完全不同alpha打印出来是APP实例beta打印出来是button元素没想明白是为什么<button id="aa">aa</button><button id="bb">bb</button><script type="text/javascript">    class APP {        constructor() {            this.alpha = () => {                console.log(this);            }            const $aa = document.querySelector('#aa');            const $bb = document.querySelector('#bb');            $aa.addEventListener('click', this.alpha);            $bb.addEventListener('click', this.beta);        }        beta() {            console.log(this);        }    }    new APP();</script>

Answer 1

箭头函数没有自己的this是外部作用域的this
所以箭头函数的this跟声明的位置有关
普通函数的this跟调用者有关

Answer 2

// 楼主 把alpha换成 这样，打印的结果是不是都是button了

this.alpha = function(){

    console.log(this);

}

Answer 3

alpha打印是在箭头函数之下打印的，箭头函数没有自己的this，换成普通的function就ok了