[JavaScript] this

자바스크립트에서 this는 항상 어떤 객체를 가리킨다.

 

Global context에서의 this

함수 밖에서 this가 가리키는 객체는 항상 winodw가 된다.

 

Function context에서의 this

함수 내부에서 this가 가리키는 객체는 어떻게 함수를 호출했는가에 따라 달라진다. 만약 함수가 특정 객체의 메서드로 호출된다면 this는 특정 객체를 가리키게 된다. 이는 객체의 메서드를 호출할 때 내부적으로 this를 바꿔주기 때문이다.

 

하지만 변수에 객체의 메소드를 할당하여 호출한다면 결과는 달라진다.

 

이 경우에는 o2가 함수이며 메서드를 호출한 것이아니라 함수를 호출했기 때문에 this는 undefined가 된다. 만약 this에 특정 객체를 할당하고 싶다면 call, apply를 사용하면된다. 함수를 호출하는 대신 call, apply 메서드를 호출하고 this가 가리킬 객체를 인자로 전달한다.

 

bind 메서드를 사용해서도 this에 특정 객체를 할당 할 수 있다. 다만 bind 메서드를 호출하고 this가 가리킬 객체를 인자로 전달하면 this가 특정 객체를 가리키는 새로운 함수를 반환해 사용법이 조금 다르다.

 

 

중첩된 함수 안에서의 this

위의 예제에서 객체의 메소드안에서의 this는 객체를 가리켰다. 하지만 다음과 같이 메소드 안에 함수를 정의하고 그 함수 내부에서 this를 사용하면 this는 객체를 가리키지 않는다.

 

다음과 같이 코드를 작성한다면 this가 객체를 가리키기를 의도했겠지만 그렇지 않다. 이를 원하는대로 작동하게 하기위해서는 다음과 같이 다른 변수에 this를 할당해야한다.

 

화살표 함수 안에서의 this

위의 예제에서 innerFunc를 화살표 함수를 사용하여 정의한다면 this가 가리키는 객체는 항상 o가 된다. 화살표 함수 내부에서의 this는 화살표 함수를 포함하고 있는 context에서의 this를 이어받기 때문이다.

 

다음과 같이 this를 다른 변수에 할당하는 작업을 하지 않더라도 중첩된 함수 안에서의 this가 객체를 가리키게 된다. 첫 번째예제로 돌아가서 만약 메소드 자체를 화살표 함수로 정의하면 this는 어떤 객체를 가리키게 될까. 앞서 설명한 것처럼 화살표 함수 내부에서의 this는 함수를 포함하는 context의 this를 이어받기 때문에 window를 가리키게 된다.

 

따라사 일반적으로 객체 내부에서 this를 사용하는 경우 메소드는 function 키워드를 이용해 정의하고, 함수 내부에서 상위 context의 this를 가리켜야하는 경우에는 화살표 함수를 쓰는 것이 좋다.

 

이벤트 리스너의 콜백함수 내부에서의 this

이벤트 리스너의 콜백함수에서 this는 이벤트를 발생시킨 객체가 된다. 물론 콜백 함수를 function 키워드를 이용해 정의해야만 객체가 되고 화살표 함수를 이용하면 그 상위 context의 this를 가리키게 된다. 이를 위한 간단한 예제를 작성해보았다. 브라우저에서 키보드를 누르면 이벤트가 발생하고 그 이벤트가 발생했을 때의 콜백 함수에서 this를 출력해보았다.

 

다음과 같이 this는 이벤트가 발생한 document를 가리킨다.

 

참고자료

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

this

https://www.hanbit.co.kr/store/books/look.php?p_code=B2328850940

러닝 자바스크립트