[Javascript] 콜백함수의 this

콜백함수는 함수A의 제어권을 다른함수(또는 메서드) B에게 넘겨주는 경우, 함수A를 콜백함수라고 한다.

이때 this는 함수B 내부로직에서 정한 규칙에 따라 값이 결정된다 -> 추후에 나오겠지만 전역객체 일수도, 메서드의 객체의 this일수도 있다.

콜백함수 내부에서의 this

setTimeout(function(){ console.log(this); }, 300);

[1, 2, 3, 4, 5].forEach(function(x){
	console.log(this, x);
});

document.body.innerHTML += '<button id="a">클릭</button>';
document,body.querySelector('#a').addEventListener('click', function(e){
	console.log(this, e);
});

위의 코드를 실행한다면 setTimout함수와 forEach함수의 콜백함수를 호출할때 대상이 될 this를 지정하지 않기때문에 전역객체를 참조한다. 반면 addEventListener메서드는 콜백함수를 호출할 때 자신의 this를 상속하도록 정의되어 있다. 따라서 id 값 a를 갖는 태그 객체를 this로 참조한다.

결과

forEach로 인해 중복되는 console.log를 제외하고 맨 아래 addeventListener메서드의 콜백함수 this 값을 보면 '<button id="a">클릭</button>' 가 출력되는걸 알수있다. 

따라서 콜백함수에서의 this는 '무조건 이거다' 라고 정의할 수 없다. 콜백함수의 제어권을 가진 함수(메서드)가 콜백함수에서의 this를 무엇으로할지 결정하며, 특별히 정의하지 않는 경우에는 기본적으로 함수와 마찬가지로 전역객체를 바라본다.

 

실험

만약 화살표함수로 addEventListener의 콜백함수로 쓴다면 그전 글에서와 같이 this바인딩 과정이빠지고, 상위 스코프의 this를 참조하므로 this는 전역객체를 참조하게된다.