자바스크립트 this binding

자바스크립트에서는 this.<함수>를 callback 등으로 전달할때 this의 class 정보가 무시됩니다.

예를 들어 아래와 같은 코드가 있습니다.

class Test {
    constructor(a, b) {
        this.a = a
        this.b = b
        this.test = document.querySelector('.box')
        this.test.addEventListener('click', this.onClick)
    }
    
    
 
    onClick() {
        const tot = this.a + this.b
        console.log("a+b: " + tot)
    }
}
 
t = new Test(1,2)

 

clickMe 박스를 클릭할 경우 3이 나오는 코드입니다.

그러나 실제로 해보면 "a+b: NaN"이 나오게 됩니다. 이는 onClick이 addEventListener에 callback형태로 넘겨질때 this에 대한 정보가 없어지기 때문입니다.

이를 위해 this binding을 해주어야합니다.  addEventListener 부분을 아래와 같이 바꿔주면 됩니다.

 

방법1

.addEventListener('click', (event) => this.onClick(event))

 

방법2

.addEventListener('click', this.onClick)

onClick = (event) => {

    ...

}