JavaScript-화살표 함수와 this

함수 선언문을 화살표 함수로 바꿨다.

document.addEventListener('click', ()=>{
	console.log(this);		//window
});

함수 선언문일 때만 document가 나오는 이유는, click 이벤트가 발생할 때 addEventListener 메서드가 콜백 함수의 this를 event.target으로 바꿔서 호출하기 때문이다.

함수 선언문의 this는 다음과 같이 bind 메서드를 사용해서 직접 바꿀 수 있다.

function a( ) {
	console.log(this);
}
a.bind(document)( ); 		//document

단, 화살표 함수는 bind를 할 수 없어서 this가 바뀌지 않아 window가 그대로 나온다.

const b = ( ) => {
	console.log(this);
}
b.bind(document)( );		//window

이런 이유로 addEventListener 안에서 함수 선언문을 사용하면 document가 출력되고, 화살표 함수를 사용하면 window가 출력된다.

콜백 함수가 함수 선언문이라면 this는 addEventListener에 의해 각각 콜백 함수안의 새로운 this로 바뀌게 된다. 이를 막으려면 화살표 함수를 사용해 기존 this를 유지해야 한다.

화살표 함수의 this가 무조건 window라고 오해할 수 있는데, 화살표 함수는 기존 this를 유지할 뿐 this를 어떤 값으로 바꾸지는 않는다.

this는 상황에 따라 다른 값을 가진다. 기본적으로는 this는 window 객체를 가리키므로 어떤 때 다른 값을 가지는지만 외우면 된다.

1. 객체를 통해 this를 사용할 때는 this가 해당 객체를 가리키게 된다.
2. 특정 메서드는 콜백 함수의 this를 바꾼다. addEventListener가 대표적이다.
3. this가 바뀌는 것을 원치 않는다면 함수 선언문 대신 화살표 함수를 사용한다.