javascript TypeError: 'X' is not a function 오류 해결! <this 바인딩>

문제 발생 !

Uncaought TypeError: this.onItemClick is not a function at HTMLElement.onClick

 

무려 나를 3~4시간동안이나 방황하게 만든 오류였다 ...

오류가 났었던 코드

해당 코드로 하니까 문제가 발생한 상황 .... ㅠㅠ

 

 

 

어..? 하다보니까 문제가 해결 됐는데!

근데 도대체 이유가 뭐지 !!

오류가 해결된 상황 (!) 그런데 도대체 왜 ?!

 

 

 

 

답은 javascript <this 바인딩> 문제였다.

 

먼저, this란?

자바스크립트에서 this는 현재 실행되고 있는 코드를 가리킨다. this 를 직역하면 "이것" 이듯이, 그냥 지금 이순간의 코드를 가리키는 것이다. 자기자신을 손가락으로 가리키고 있는 것이라고 생각하면 편하다.

 

그래서 왜 실행이 안됐던 건데?

this.(특정 엘리먼트).addEventListener('click', this.(특정 함수));

// 예시 example
this.gameField.addEventListener('click', this.onClick);

위의 코드와 같이 특정 함수를 함수명 그대로 전달할 때, 자바스크립트에서는 클래스 정보는 같이 전달이 되지 않는다.

즉, 위 코드와 같이 함수를 인자로써 어딘가에 전달할 때, 클래스는 무시된 상태로 함수만 전달이 되어진다.

그러니까 껍데기만 전달이 되고 그 안에 알맹이는 전달이 되지 않는 것이다. (!!!)

 

따라서 이 때 필요한 것이 데이터 바인딩이다 !

 

바인딩 처리하기 첫번째, 직접 바인딩하라고 알려주기

this.(특정 함수) = this.(특정 함수).bind(this);
this.(특정 엘리먼트).addEventListener('click', this.(특정 함수));

// 예시 example
this.onClick = this.onClick.bind(this);
this.field.addEventListener('click', this.onClick);

 

바인딩 처리하기 두번째, 에로우 펑션(Arrow function) 이용하기

this.(특정 엘리먼트).addEventListener('click', (event) => this.(특정 함수)(event));

// 예시 example
this.gameField.addEventListener('click', (event) => this.onClick(event));

 

바인딩 처리하기 세번째, 애초부터 함수를 정의할 때 데이터 바인딩 하기

// 원래 일반적인 함수 정의
onclick(event) {
	// ...
}

// 바인딩 처리한 함수 정의
onclick = event => {
	// ...
};