this를 알 수 없는 케이스

이벤트 리스너

const header = document.querySelector('header');
header.addEventListener('click', function() {
	console.log(this);
});

// 클릭했을 때 header 가 출력

this 가 window로 추측하면 안된다.

this를 포함하고 있는 익명함수가 호출되는 것을 확인할 수가 없기 때문에,

addEventListener에서 콜백함수가 어떻게 호출되는지 모르기 때문에

this 가 무엇인지는 알 수가 없다.

함수는 1급 객체로, 파라미터로 넘겨줄 수 있다.

header 출력을 보고 내부를 추측해보자.

const header = {
	addEventListener: function(eventName, callback) {
		callbcck.call(this);
		// callbcck.call(header); 이렇게 되어 있을 수도
	}
};

---

화살표 함수라면

const header = document.querySelector('header');
header.addEventListener('click', () => {
	console.log(this);
});

// window가 출력

화살표 함수는 부모로부터 물려받고

화살표 함수 선언이기 때문에 화살표 함수가 호출될 때

부모는 anonymous이고 따라서 this ⇒ window