클래스 내에서 this바인딩이 제대로 안되는 문제

소스 코드

 

 다음과 같이 생성자 함수 내에서 이벤트 리스너를 등록해주고 콜백 함수로 클래스 내의 메소드를 인자로 넘겨주었다.

 하지만 OnClick 메소드 내에서의 this는 Field 클래스의 인스턴스를 참조하지 못하고 undefined를 바인딩되는 문제가 발생하였다.

 (2021.3.17) onClick은 콜백함수이기 때문에 고차 함수 내에서 일반 함수로 호출이 된다. 일반 함수의 this는 전역 객체가 바인딩되지만 class 내의 모든 소스 코드에선 기본적으로 'strict mode'가 적용되기 때문에 undefined 가 바인딩되는 문제가 생기는 것이다.

(2021.7.25)이벤트 핸들러를 통해 호출되는 콜백 함수의 this는 currentTarget, 즉 이벤트를 바인딩한 DOM 요소를 가리킨다.

 이를 해결하기 위해 총 세 가지의 방법이 있었다.

 

 1. bind() 메소드를 사용

     명시적으로 인스턴스의 메소드에 this를 바인딩해주고 이를 콜백함수로 넘김.

bind() 사용

 

 2. 화살표 함수로 wrapper하고 거기서 OnClick()을 호출함.

(2021.3.22) 화살표 함수는 함수 자체의 this 바인딩을 갖지 않는다. 화살표 함수  내부에서 this를 참조하면 상위 스코프의 this를 그대로

참조한다.

arrow func 사용

 3. OnClick에 함수 리터럴로 할당해 해주는 방식

함수 리터럴