javascript アロー关数を使った此の束缚

Posted 2021-05-03

// thisは実行箇所によって参照先が異なることに注意

class LikeCounter {
    constructor () {
        this.clickedCount = 0;
        
        const button = document.querySelector('.button')
        const clickedCountText= document.querySelector('.clickedCountText')
        
//      普通のfunction宣言だと、this.clickedCountの「イベントリスナー内のthis」になるので
//      thisはイベントターゲットを参照し、最初に0を代入したclickedCountを参照できない。
//      アロー関数にすれば、thisは固定される。
// NG:  button.addEventListener('click', function () {

        button.addEventListener('click', () => {
            this.clickedCount += 1;
            clickedCountText = this.clickedCount;       
        })
    }
}

new LikeCounter();