this의 동작 원리와 용법
면접에서 “this가 동작하는 원리와 용법을 아는 대로 설명해 주세요. 평소 코드 중에서는 어떤 부분에서 가장 큰 차이가 생기나요?”라는 질문이 자주 나옵니다. 동작 원리부터 용법까지 정리해 보겠습니다.
동작 원리
전역 컨텍스트
전역 컨텍스트에서 this는 전역 객체를 참조합니다. 브라우저에서는 전역 객체가 window 객체이고, Node.js에서는 global 객체입니다.
함수 호출
함수를 호출할 때 this는 호출한 방법에 따라 달라집니다.
- 일반 함수 호출 : 일반 함수 내에서
this는 전역 객체를 참조합니다. (strict mode에서는undefined가 될 수도 있습니다.) - 메서드 호출 : 객체의 메서드로 함수를 호출할 때,
this는 해당 메서드를 호출한 객체를 참조합니다. - 생성자 함수 : 생성자 함수로 객체를 생성할 때,
this는 생성되는 인스턴스 객체를 참조합니다. - call, apply, bind : 이 메서드들을 사용하여 명시적으로
this를 지정할 수 있습니다.
용법
객체 메서드
객체의 프로퍼티로 할당된 함수(메서드) 내에서 this는 해당 객체를 참조합니다. 이를 통해 메서드는 객체의 상태에 접근하고 수정할 수 있습니다.
이벤트 핸들러
이벤트 핸들러 함수 내에서 this는 이벤트를 발생시킨 DOM 요소를 참조합니다. 이를 통해 이벤트가 발생한 요소에 대한 작업을 수행할 수 있습니다.
생성자 함수
생성자 함수 내에서 this는 생성되는 인스턴스 객체를 참조합니다. 생성자 함수는 객체의 초기화를 위해 사용되며, this를 통해 인스턴스 객체의 프로퍼티와 메서드를 설정할 수 있습니다.
명시적인 this 바인딩
call, apply, bind 메서드를 사용하여 명시적으로 this를 지정할 수 있습니다. 이를 통해 함수의 실행 컨텍스트를 원하는 객체로 변경할 수 있습니다.
평소 코드와의 차이점
평소 코드에서 가장 큰 차이는 this의 값이 호출되는 시점과 컨텍스트에 따라 동적으로 결정된다는 점입니다. this를 올바르게 이해하고 사용하면 객체 지향 프로그래밍에서 객체 간의 상호작용을 유연하게 다룰 수 있습니다.
한 줄 요약
this는 함수가 어떻게 호출되었는지에 따라 동적으로 결정됩니다. 일반 함수는 전역 객체(strict mode에서는 undefined), 메서드는 호출한 객체, 생성자는 인스턴스를 가리키며, call/apply/bind로 명시적으로 바인딩할 수 있습니다.