[JS] this 바인딩

JS 로 만드는 간단한 게임 어플리케이션을 리팩터링 하다 발생한 이슈

기존 코드(main.js)

필드 클릭시 event target이 당근이라면 당근 이미지 삭제 + 점수 증가 + 당근 사운드 플레이 + 점수 판 업데이트 하지만 필드 클릭시 event target 이 벌레라면 게임이 종료되는 코드다.

기존엔 main.js파일에 모든 기능이 나열되어 있었기 때문에 문제가 없었다.
하지만 기능을 분리하면서 문제가 발생했다.

Field 클래스를 main.js에서 분리하고 main.js에 Field 클래스를 import한 후 기존의 onFieldClick함수를 field의 이미지를 클릭하는 함수와 이미지를 클릭할때마다 점수가 변하는 함수로 나누었다.

Field.class

main.js

이때 Field 클래스의 addEventListener 에 매개변수로 있는 this.onClick을 인자로 전달할 때 Field 클래스의 정보가 전달되지않았다. this.onClick이 클래스와 바인딩되지 않았다는 것이다.

따라서 Field 클래스의 정보를 전달하기 위해서는 바인딩을 명시적으로 해줘야한다.

첫번째 방법

this.onClick = this.onClick.bind(this);

를 추가해준다. 자주 사용되는 방법은 아님

두번째 방법

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

자주 사용되는 방법이다.

세번째 방법

함수를 멤버변수로 만들고 변수가 arrow function을 가리킨다.