[JS] this 키워드

강원지·2023년 6월 15일

JavaScript this 함수 호출

옾터디

목록 보기

1/4

this란

this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수입니다.

this가 될 수 있는 객체의 종류

window

브라우저의 경우 전역에서의 this = window입니다.(Node.js에서 전역 객체는 global)

개발자 도구에 냅다 this를 찍어보면 window 객체가 출력되는 걸 알 수 있습니다.

window 객체란?

window 객체는 브라우저 최상위에 있는 객체로 전역으로 선언한 변수나 함수, DOM, BOM 등이 속합니다.

전역 변수 apple은 window 객체 안에 저장됩니다. 여기서 this는 window에 해당하기 때문에 this.apple도 같은 결과를 출력합니다.

💡브라우저에서 전역 변수와 함수는 window라는 전역 객체 안에 저장되어 있다. 함수는 window 객체 안에 있는 메서드라고도 볼 수 있다.

object

직접 호출

메서드 내부의 this는 메서드를 소유한 객체가 아니라 메서드를 호출한 객체에 바인딩됩니다.

여기서 obj.printThis( )의 경우 obj가 함수를 호출한 주체가 되어 this는 obj를 가리킵니다.

바인딩 메서드에 의한 간접 호출

apply, call, bind 메서드를 이용해 this로 사용할 객체를 지정하는 방법도 있습니다. 이 부분은 아래에서 자세히 다루겠습니다.

인스턴스

this에는 생성자 함수로 생성된 인스턴스가 바인딩됩니다.

이벤트 리스너

이벤트 리스너 안의 this는 대부분 e.currentTarget로 사용된다고 합니다. 이 부분은 DOM 공부할 때 다시 다뤄보겠습니다.

함수 호출 방식에 따른 this 바인딩

일반 함수 호출

객체를 생성하지 않은 일반 함수에서 this는 의미가 없습니다.
전역 함수 뿐만 아니라 중첩 함수를 일반 함수로 호출하는 경우에도 함수 내부의 this는 전역 객체가 바인딩됩니다.

inner( )와 outer( ) 모두 this가 전역 객체를 나타냅니다.

메서드 내 중첩 함수가 일반 함수로 호출이 된다면?

outer( )은 메서드로 호출이 되고 inner( )은 일반 함수로 호출하였습니다. 일반 함수로 호출된 경우에는 메서드 내에 있더라도 전역 객체가 바인딩됩니다.

💡일반 함수로 호출된 모든 함수의 내부의 this에는 전역 객체가 바인딩된다.

메서드 호출

메서드를 호출한 객체가 this가 됩니다.

만약 화살표 함수로 메서드를 작성하면?

화살표 함수는 화살표 함수 자체로 스코프를 만들지 않고 자신과 가장 가까운 상위 함수의 스코프에서 this 값을 받아옵니다.

case 1. 메서드를 화살표 함수로 작성한 경우

inner의 this는 생성 시점에 결정됩니다.

case 2. 메서드 내 중첩 함수를 화살표 함수로 작성한 경우

위에서 메서드 내 중첩 함수를 일반 함수로 작성한 경우를 살펴봤습니다. 중첩 함수를 화살표 함수로 작성하면 어떻게 될까요?

화살표 함수로 작성된 inner( )의 상위 함수는 일반 함수로 작성된 outer( ) 메서드입니다. 따라서 inner( )의 this는 가장 가까운 상위의 일반 함수 outer( ) 메서드의 this와 같습니다.

참조에 의한 메서드 호출

printThis 메서드를 printObjThis 변수에 할당하여 함수를 참조해 보겠습니다.

참조에 의해 호출되는 경우 this는 전역 객체를 가리킵니다.
this의 값이 호출에 의해 설정되지 않으므로, 기본값으로 브라우저에서는 window인 전역 객체를 참조합니다.