this

객체의 동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조할 수 있어야 한다. 이때, 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다.

즉, this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. this를 통해 자신이 속한 객체 또는 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.

this는 JS 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다. 함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달된다.

함수 호출 방식과 this 바인딩

this가 가리키는 값(this 바인딩)은 함수 호출 시점에 따라 동적으로 결정된다.

• 렉시컬 스코프 vs this 바인딩의 타이밍

1. 일반 함수 호출 : 기본적으로 this에는 전역 객체가 바인딩된다. 즉, 일반 함수처럼 호출되는 모든 함수(콜백함수, 중첩 함수 포함) 내부에서 this는 전역 객체가 바인딩된다.
2. 화살표 함수 : 화살표 함수는 상위 스코프의 this가 가리키는 객체에 바인딩 된다.
3. 메서드 호출 : 마침표 연산자 앞에 기술한 객체, 즉 메서드를 호출한 객체가 바인딩된다.
   • 메서드 호출의 부연 설명
4. 생성자 함수 호출 : 생성자 함수 내부의 this에는 생성자 함수가 생성할 인스턴스가 바인딩 된다.
5. Function.prototype.apply/call/bind 메서드에 의한 간접 호출
   • apply/call : this로 사용할 객체와 인수 리스트를 인수로 전달받아 함수를 호출한다. 즉, 호출할 함수의 this를 지정하여 호출하는 방식이다.
     • 코드 예시
   • bind : bind 메서드는 함수를 호출하지 않고, this 바인딩이 교체된 함수를 새롭게 생성해 반환한다. 즉, 함수와 객체를 묶은 새로운 함수를 리턴하는 것이다.
     • 코드 예시