이벤트 리스너에서의 this에 대해 여쭙고 싶습니다

강사님 답변해주셔서 감사합니다

아직 이해가 어려운 부분이 있어서 더 질문드리고 싶습니다

질문1.
라이브러리에 선언된
button 객체의 원형이
button = {
  addEventListener(eventName, cb) {
    cb.call(this);
  }
}

라는 말씀으로 이해해도 될까요?


질문2. 
제가 봤을 때는
소스코드가 실행이 될 때
콜백 함수 function( ) 호출 시점에서
function( )단일로 호출되므로 
아무리 생각해도, 안의 this가 window 같습니다

조작을 했다는 말씀이
소스코드가
실행이 될 때 V8 엔진이

이벤트리스너 소스코드

button.addEventListener('click', function(){ });

를
실행 도중에 
button = {
  addEventListener(eventName, cb) {
    cb.call(this);
  }
}
button.addEventListener.cb.call(this);

이런 식으로 중간에 조작해서 실행했다는 말씀이신가요?


질문3.
현재 제 수준에서는 이해가 어려워서 혹시 call 함수를 공부하면 이해하는 데 도움이 되는지도 질문드리고 싶습니다

1. 그냥 예시를 든 것입니다. C++로 작성되어있을거라서 구체적인 코드는 모릅니다.

2. 단순히 호출 시에 function에 다른 this를 바인딩한 것입니다.

function은 기본적으로 this가 window라고 했죠? 그리고 이 this는 정확하게는 호출 시에 정해집니다. function의 이름이 a라고 했을 때 a();를 하면 this가 window가 되는 것이고, button.a()를 하면 this가 button이 되는겁니다. addEventListener에 넣은 function은 호출 시에 내부적으로 function.call(태그)를 해서 this를 태그로 바꾸는 것이고요.

강사님 너무 많은 질문을 받아주셔서 감사합니다

그러면 이 조작이라는 것을 이렇게 이해해도 되는지 질문드리고 싶습니다
1.
V8 엔진이 소스코드를 실행 중에
2.
이벤트 리스너 함수를 만나면
3.
이벤트 리스너 함수를
엔진 내부에 C++ 로 미리 정의되어 있는 소스코드로 조작을 해주기 때문에
4. 
이벤트 리스너 함수의 콜백함수 this는
실행 도중에 window에서
이벤트 객체 button으로 변한다는 말씀으로
이해해도 되는지 질문드리고 싶습니다

window에서 변한다기보다는 그냥 this가 바로 button이 되는 겁니다. 호출할 때 this를 정하는 것이고, 아무 조작이 없으면 window가 되고, 조작이 있으면 그걸로 변하는 겁니다.

강사님 혹시 이렇게 이해해도 되나요?

만약에 소스코드가 1행부터 5행까지 있으면

소스코드가 첫줄부터 차례대로 실행되는데
예를 들면 중간에 3번째 줄의 함수가 라이브러리에서 구현되어 있는 함수면

그 라이브러리로 건너뛰어서 해당 함수를 구현한 코드를 수행하고

전부 마치면 다시 원래대로 3행으로 돌아오고 다시 순서대로 실행하듯이


제 눈에는 이벤트리스너를 조작한 코드가 보이지 않지만

자바스크립트 기본 내장된 라이브러리에서

이벤트 리스너 함수를 조작한 C++ 코드가 있어서

이벤트 리스너 함수를 실행하는 차례에

그 이벤트 리스너 함수를 조작한 라이브러리의 코드가 실행이 되어서

제 눈에는 조작된 코드가 안보이지만, 자동으로 조작이 되는 원리인가요?

네 이벤트가 발생할 때 c++에서 이벤트리스너에 등록된 콜백에 this를 바꿔서 실행해주는 겁니다.

강사님 너무 많은 질문을 받아주시고 가르쳐주셔서 감사합니다