在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ 事件綁定的this問(wèn)題

事件綁定的this問(wèn)題

alpha方法掛在實(shí)例上

beta方法掛在原型上

它們打印出來(lái)的this卻完全不同

alpha打印出來(lái)是APP實(shí)例

beta打印出來(lái)是button元素

沒(méi)想明白是為什么

<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>
回答
編輯回答
赱丅呿

// 樓主 把a(bǔ)lpha換成 這樣,打印的結(jié)果是不是都是button了

this.alpha = function(){
    console.log(this);
}
2017年2月3日 06:56
編輯回答
膽怯

alpha打印是在箭頭函數(shù)之下打印的,箭頭函數(shù)沒(méi)有自己的this,換成普通的function就ok了

2017年10月1日 18:09
編輯回答
九年囚

class直接聲明的方法其實(shí)就是一個(gè)未綁定this的普通function,執(zhí)行這個(gè)function時(shí)的this是什么得看是誰(shuí)調(diào)用的,所以這就會(huì)產(chǎn)生一些問(wèn)題,為了解決這個(gè)問(wèn)題有下面這些方法

class A{
    constructor(){
        this.a=this.a.bind(this);
    }
    a(){}
}

-

class A{
    @autobind
    a(){}
}

-

class A{
    a=()=>{}
}
2017年7月28日 04:01
編輯回答
離觴

箭頭函數(shù)沒(méi)有自己的this是外部作用域的this
所以箭頭函數(shù)的this跟聲明的位置有關(guān)
普通函數(shù)的this跟調(diào)用者有關(guān)

2017年3月24日 06:30