[JS] this 부터 call, apply, bind 까지

내가 다른 언어보다 JS에서 가장 애를 먹었던 키워드들 중 하나가 this 이다. this에 대해 공부한 내용을 최대한 내 언어로 정리해보려고 한다.

 

this는 무엇인가?

JAVA에서의 this는 간단히 말하면 해당 인스턴스를 가리키는 키워드이다.

JS에서도 클래스의 인스턴스 내에서 this를 사용하면 해당 객체를 가리키게 된다..만, JS의 this는 조금 다른 의미를 가지고 있다.

 

this는 기본적으로 전역 객체를 가리킨다

Chrome 브라우저에서 개발자 도구 콘솔을 열고 this를 입력해보면 다음과 같이 나온다.

 

이렇게 Window 객체가 나오는것을 확인할 수 있다. 이번에는 nodejs에서 this를 출력해 본다.

 

 

nodejs에서 this를 입력하여 확인해보면, 이렇게 global 객체의 정보가 출력된다.

 

이렇듯 this는 기본적으로 해당 실행 환경의 전역 객체를 가리키고 있다.

 

this는 호출되는 객체를 가리킨다

앞서 this는 전역 객체를 가리킨다고 했는데, 갑자기 웬 호출되는 객체? 라고 생각할 수 있지만, 사실 이전에 전역 객체를 가리키고 있던 이유는 전역 환경에서 this를 사용했기 때문이다. 만약 특정한 객체 내에서 this를 사용한다면, this 키워드는 해당 객체를 가리키게 된다.

 

 

이 예시를 살펴보면, obj.fn으로 호출한 함수의 this는 obj를 가리킨다. 따라서 obj의 prop인 3을 출력한다. 그러나 globalFn은 전역 컨텍스트에 선언되었기 때문에 해당 함수를 호출하면 전역 prop인 4가 출력된다. 같은 foo 함수이지만 어디서 호출되는지에 따라 this는 다른 객체를 가리킨다.

 

여담으로 전역 변수 prop을 선언할 때 ES6의 let, const를 사용하면 undefined 가 출력된다. 이는 var를 통해 전역 변수에 선언하는 것이 많은 문제를 가지고 있기 때문에 ES6에서는 let이나 const로 변수를 선언할 경우 전역 객체에 직접 선언하지 않는듯 하다.

 

this가 가리키는 객체를 명시적으로 바꾸기 위해 call, apply, bind를 사용한다

this가 호출되는 객체를 가리킨다는 것도 알겠다. 그런데 코드를 작성하다보면 자동으로 지정된 this 키워드가 가리키는 객체를 한번만 바꿔서 실행하고 싶거나, 아예 다른 this로 바꿔서 계속 사용하고 싶은 경우가 무조건 생긴다. 이럴 때 사용하는 메서드가 call, apply, bind 이다

 

 

foo 함수의 this는 기본적으로 전역 객체를 가리키고, 따라서 그냥 실행하면 4 fn defalut 가 출력된다. 여기서 call 을 통해 해당 함수의 this를 한번만 바꿔서 실행시킬 수 있다. call 함수의 첫 인자로 this가 가리킬 객체를 주고, 나머지 인자로 원래 해당 함수의 인자를 주면 된다. 예시에서는 obj 객체를 가리키게 해서 3 fn call 이라는 결과를 출력하도록 했다.

 

apply 함수는 call 함수와 같지만 두번째 인자로 원래 함수의 인자들을 배열로 받는다는 차이점이 있다.

 

bind 함수는, 원래 함수의 this를 원하는 객체로 바꾼 뒤 계속 사용하고 싶을 때 사용한다. bind 함수를 호출하면서 첫 번째 인자로 바꿀 객체를 주면, this만 바뀐 새로운 함수가 반환된다.

번외: DOM 이벤트에서의 this

DOM 의 이벤트를 처리하는 함수 내에서는 특별하게 this는 이벤트를 발사한 요소(event.currentTarget) 으로 설정된다. 간단하게 Chrome 개발자 도구 콘솔에서 테스트해보면, 

 

 

콘솔에서 이런 식으로 모든 div에 이벤트를 걸어준다. 이후 아무데나 클릭해본다.

 

 

이렇듯 클릭한 div 자체가 출력되는것을 볼 수 있다.