이벤트 핸들러 this 바인딩 문제

문제

 li.addEventListener('click', () => {
            const obj = {
                image: this.dataset.image,
                ...JSON.parse(this.dataset.user)
            }
            modal.classList.add('active');
            thumbnail.src = obj.image;
            profileImg.src = obj.medium;
            userName.textContent = obj.name;
            insta.textContent = obj.instagram_username;
        })

https://choi95.tistory.com/106

JS 상에서 어트리뷰트에 객체 동적 할당

이전 포스팅에서는 일반 함수로 최종 리팩토링된 상태의 코드였지만 처음 구현할 때는 이벤트 내의 콜백 함수는 화살표 함수로 작성했었다.

하지만 이와 같이 화살표 함수를 사용하니, this 바인딩이 window 전역 객체를 가리켜 문제가 발생하였다.

 

문제 해결

이벤트 핸들러 함수 내부의 this

• 인라인 이벤트 핸들러 방식: this => 전역객체
• 이벤트 핸들러 프로퍼티 방식: this => event.currentTarget
• 화살표 함수 방식: this => 상위 스코프에 따라 정적으로 결정

---

this가 이벤트가 바인딩되어 있는 요소를 참조하기 위해서는 화살표 함수가 아닌 일반 함수를 써야 한다.

 

화살표 함수는 함수 호출 방식에 따라 this가 동적으로 결정되는 일반함수와 달리 함수가 선언될 때 this에 바인딩될 객체가

정적으로 결정되기 때문이다.

현재 화살표 함수에서의 this는 상위 스코프인 일반 함수를 참조하고 있고 일반 함수에서의 this는 기본적으로 window 전역 객체를 가리키기 때문에 오류가 발생하였던 것이다.

 

https://choi95.tistory.com/7?category=857834 

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

이전 this 바인딩 관련 포스팅에서

onClick은 콜백 함수이기 때문에 고차 함수 내에서 일반 함수로 호출이 된다.

일반 함수의 this는 전역 객체가 바인딩되지만 class 내의 모든 소스 코드에선 기본적으로 'strict mode'가 적용되기 때문에 undefined 가 바인딩되는 문제가 생기는 것이다.

라고 기술하였는데, 지금 보니 이는 틀린 내용이다.

onClick은 이벤트 핸들러에서의 콜백 함수이기 때문에 함수 호출이 될 경우 내부의 this는 전역 객체 window가 바인딩되어서 오류가 난 것이 아니라 정확히는 event.currentTarget이 바인딩되어서 오류가 난 것이다.

물론 만약에 onClick이 일반적인 상황에서 고차 함수 내에서 호출이 되었을 경우에는 this에는 전역 객체 window가 바인딩된다.