본문 바로가기
interactive service/Web

03. 코어 자바스크립트_this

by jessicahan96 2022. 1. 3.

다른 대부분의 객체지향 언어에서 this는 클래스로 생성한 인스턴스 객체를 의미한다. 그러나 자바스크립트에서의 this는 어디서든 사용할 수 있다. 상황에 따라 this가 바라보는 대상이 달라지는데, 어떤 이유로 그렇게 되는지를 파악하기 힘든 경우도 있고 예상과 다르게 엉뚱한 대상을 바라보는 경우도 있다. 이런 경우에 문제를 해결하려면 원인을 추적해서 수정해야 하는데, 정확한 작동 방식을 이해하지 못하면 원인을 파악해서 해결할 수 없을 것이다.

함수와 객체(메서드)의 구분이 느슨한 자바스크립트에서 this는 실질적으로 이 둘을 구분하는 거의 유일한 기능이다.

다음 규칙은 명시적 this 바인딩이 없는 한 늘 성립한다. 원리를 바탕으로 꾸준히 다양한 상황에서 this가 무엇일지 예측해보는 연습이 필요하다.

* 전역 공간에서의 this는 전역객체(브라우저에서는 window, Node.js에서는 global)를 참조한다.

* 어떤 함수를 메서드로서 호출한 경우 this는 메서드 호출 주체(메서드명 앞의 객체)를 참조한다.

* 어떤 함수를 함수로서 호출한 경우 this는 전역객체를 참조한다. 메서드의 내부함수에서도 같다.

* 콜백 함수 내부에서의 this는 해당 콜백 함수의 제어권을 넘겨받은 함수가 정의한 바에 따르며, 정의하지 않은 경우에는 전역객체를 참조한다.

* 생성자 함수에서의 this는 생성될 인스턴스를 참조한다.


다음 규칙은 명시적 this 바인딩이다. 위 규칙에 부합하지 않는 경우에는 다음 내용을 바탕으로 this를 예측할 수 있다.

* call, apply 메서드는 this를 명시적으로 지정하면거 함수 또는 메서드를 호출한다.

* bind 메서드는 this 및 함수에 넘길 인수를 일부 지정해서 새로운 함수를 만든다.

* 요소를 순회하면서 콜백 함수를 반복 호출하는 내용의 일부 메서드는 별도의 인자로 this를 받기도 한다.