this를 분석할 수 없는 케이스

zerocho.com 사이트에 들어가서 공지사항을 클릭했을 때

"zerocho.com"에 들어가서 공지사항을 클릭하면 발생

• 2번째 인자의 function이 아니라 addEventListener이 호출 됨
• 2번째 인자 function은 함수의 선언이지 호출된 적이 없다
• 그러면 function은 귀신이 와서 호출해주냐?
  • 그렇다고 봐도 됨. 왜냐면 내가 모르는 코드가 호출해주기 때문
  • 이런 경우의 this는 외워야한다.
  • 왜냐하면 저 함수는 호출하는 부분을 우리가 볼 수 없기에 경험적으로 외워야 한다.
  • 결국 저걸 만든 사람만이 알 수 있다.

addEventListener를 구현해보면(추론)

실제 addEventListener는 아마 C++로 구현되어 있을 것이다.

const header = {
    addEventListener: function(eventName, callback) {
        callback(); // 1.this가 window -> 땡
        callback.call(header); // 2.this가 header, 정답
        callback.call(this); // 3.정답
    }
};

header.addEventListener('click', function () {
   console.log(this); 
});

• 1번은 그냥 호출했기에 this = window
• 2번은 call을 사용했기에 this = header
• 3번은 this가 호출할 때 정해지며, header.addEventener의 앞에 header가 있기에 this = header

문제

zerocho.com에서 공지사항을 클릭한 상황

const header = document.querySelector('.MainPage__SectionTitle-sc-fp90zm-14');
header.addEventListener('click', () => {
   console.log(this); 
});

이 상태에서 클릭하면 결과는?

-이유

• 저 화살표 함수의 부모는 addEventListener이 아님
• () => {console.log(this)} 이 부분은 선언이다!!!
• 따라서 부모는 anonymous여서 this가 window가 된다.

-응용

• 만약 화살표 함수가 아닌 함수인데, 조작하고 싶으면
• call, apply를 사용하자
• a.apply(window) === a.bind(window)() === a.call(window)

 

-출처

https://www.youtube.com/watch?v=QME8w1zV82g&list=PLcqDmjxt30Rt9wmSlw1u6sBYr-aZmpNB3&index=9