事件绑定的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(){&nbsp; &nbsp; console.log(this);}

Answer 3

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