문제 발생 !
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 => {
// ...
};
'WEB > Javascript' 카테고리의 다른 글
| <enum class> 자바스크립트에서 자주 사용하는 옵션에 타입 부여하기 (0) | 2021.06.28 |
|---|---|
| javascript builder pattern (0) | 2021.06.28 |
| Keypress 와 Keydown 이벤트 차이점 (0) | 2021.06.15 |
| javascript input에서 값 받아와서 ul li로 추가시키기 (0) | 2021.06.15 |
| defer vs async (2) | 2021.06.15 |
