20221025 TIL 신기한 JS this

 

https://pbs.twimg.com/profile_images/468074714368200704/lg6ZrVv8_400x400.jpeg

자바스크립트에서는 this가 조금 특이하다.

this는 함수를 실행/호출하는 객체가 된다.

따라서 누가 함수를 실행하냐에 따라 this가 달라진다.

또한 this는 변수가 아니고 keyword이기 때문에 값을 대입할 수도 없다!

 

객체.메소드(); 꼴을 이용하는 경우에는 메소드에서 사용한 this는 객체가 된다.

하지만 그냥 함수(); 꼴을 이용하는 경우에는 함수 내부에서 사용한 this는 global object나 undefined(strict mode)가 된다.

그리고 이벤트 안의 this는 이벤트를 받은 요소를 가리킨다.

만약 this를 원하는 대로 지정하고 싶다면 call, apply, bind 메서드를 사용하면 this를 원하는 객체로 바인딩(설정)할 수 있다.

또한 화살표 함수에서 this는 상위 스코프의 this를 가리키게 된다.

그리고 생성자 안의 this는 생성된 객체를 가리키게 된다.

 

this는 변수가 아니고 keyword이기 때문에 코드를 해석할 때 this가 있다면

그 this가 가리키는 객체가 뭔지 먼저 생각을 해야 제대로 실행 결과를 예상할 수 있다.

 

화살표 함수 안에 this가 있는 경우 상위 스코프에 this가 있는지 찾아봐서 가장 가까이에서 찾아진 this가 된다. 

global object에 이를 때까지 못찾으면 global object나 undefined(strict mode)가 된다.

 

만약 화살표 함수 내부의 this가 아니라면

1. 먼저 함수가 bind를 이용하고 있는지 확인을 해보고, bind를 이용한다면 바인딩된 값이 this에 해당한다.

2. 만약 bind를 이용하고 있지 않다면 apply를 이용하고 있다면 apply된 것이 this에 해당하게 된다.

3. 둘 다 아니라면 call을 이용하고 있다면 call된 것이 this에 해당한다.

4. 객체의 메서드로 호출되었다면 this는 객체가 된다.

5. 만약 이 모든 게 아니라면 global object나 undefined(stric mode)가 된다.

따라서, 함수 내부에 함수가 생성된 경우나 메소드 내부에 함수가 생성된 경우에 내부 함수를 바로 호출하는 경우 내부 함수의 this는 1, 2, 3, 4번에 모두 해당되지 않기 때문에 global object나 undefined(strict mode)가 된다.

콜백 함수도 함수를 바로 호출하게 되기 때문에 1, 2, 3, 4번 모두 아니게 되고, 콜백 함수 내부의 this는 global object나 undefined(strict mode)가 된다.

 

객체의 메소드로는 화살표 함수를 사용하면 객체에 this바인딩이 되지 않기 때문에 대신 일반적인 함수 선언을 사용해야 this를 객체로 매핑을 해서 객체의 프로퍼티를 사용할 수 있고,

내부 함수나 콜백 함수에서 상위 스코프 this를 사용하고 싶을 때는 화살표 함수를 사용하면 global object나 undefined(strict mode)를 this에 바인딩하게 되는 일반적 함수 선언을 이용하는 것보다 유리하다.

이 때 이벤트 핸들러에서는 화살표 함수를 사용하면 this에 상위 스코프의 this를 가리키게 되기 때문에 일반 함수 선언을 활용해야 이벤트를 받은 요소가 this에 바인딩 된다.

 

너무 어렵긴 했지만 이제 조금은 이리 튀고 저리 튀는 느낌이 들었던 this와 조금은 친해진 것 같다.

이제 코드에 this가 나와도 두려워하지 말자!