this 공부하고 있는데 스코프, 상속 개념이 너무 헷갈리네요. 다음 코드에서 결과가 제 예상과 다르게 나오는 이유가 궁금합니다.

Question

화살표 함수 내부의 this는 상위 스코프의 this를 상속받는 걸로 알고 있는데 document.body.addEventListener(click, () => { console.log(this); }) 의 출력 결과가 document 객체가 아닌 window객체가 나오는 이유가 있나요?
자바스크립트에서의 객체와 브라우저가 렌더링하는 DOM 객체를 다르게 봐야하는 건지 궁금합니다 this 공부하는데 많이 헷갈리네요 ㅠ

강서지 · Answer

자바스크립트에서 일반 함수의 this는 함수가 어떻게 호출되는지, 즉 어떻게 실행되는지를 봐야 합니다. 콜백 함수에서의 this는 콜백 함수의 제어권을 가지는 함수에 따라 달라집니다. 이 경우 콜백 함수의 제어권을 가지는 건 addEventListener이고, addEventListener는 자신의 this를 상속하도록 정의되어 있습니다. 그래서 일반 함수의 this는 이벤트가 바인딩된 요소(이 경우에는 body)를 가리키게 됩니다.

화살표 함수의 this는 질문하신 것과 같이 상위 스코프의 this를 상속받습니다. 그런데 이 때 말하는 상위 스코프는 해당 함수가 선언(정의)될 시점의 상위 스코프입니다. 일반 함수의 this가 실행 시점에 결정되는 것과는 큰 차이가 있죠. 그렇기 때문에 전역 객체를 가리키게 됩니다.