22장 this

this 키워드

객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드로 이루어져 있다.

메서드는 자신이 속한 객체의 프로퍼티를 참조하고 변경할 수 있어야 한다.

이때 메서드는 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다.

객체 리터럴 방식으로 생성한 객체의 경우 메서드 내부에서 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조할 수 있다.

• 객체 리터럴은 circle 변수에 할당되기 직전에 평가된다. 따라서 메서드가 호출되는 시점에는 이미 객체 리터럴의 평가가 완료되어 객체가 생성되었고 식별자에 생성된 객체가 할당된 이후다.
• 따라서 메서드 내부에서 재귀 참조가 가능하다
• 하지만 재귀 참조 방식은 일반적이지 않으며 바람직하지 않다.

생성자 함수 방식으로 인스턴스를 생성하는 경우

생성자 함수 내부에서는 프로퍼티 또는 메서드를 추가하기 위해 자신이 생성할 인스턴스를 참조할 수 있어야 한다.

하지만 생성자 함수에 의한 객체 생성 방식은 먼저 생성자 함수를 정의한 이후 new 연산자와 함께 생성자 함수를 호출하는 단계가 추가로 필요하다. 생성자 함수로 인스턴스를 생성하려면 먼저 생성자 함수가 존재해야 한다.

생성자 함수를 정의하는 시점 → 인스턴스 생성하기 이전, 생성할 인스턴스를 가리키는 식별자를 모름

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

• 자바스크립트 엔진에 의해 암묵적으로 생성된다
• 코드 어디서든 참조할 수 있다.
• 함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달된다.
• arguments 객체를 지역 변수처럼 사용할 수 있듯이 this도 지역 변수처럼 사용할 수 있다.
• this 가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.

this 바인딩

• 객체 리터럴
  • 메서드를 호출한 객체를 가리킨다
• 생성자 함수
  • 생성자 함수가 생성할 인스턴스를 가리킨다

this는 코드 어디에서든 참조 가능하지만 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로 일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다.

함수 호출 방식과 this 바인딩

this 바인딩은 함수 호출 방식, 즉 함수가 어떻게 호출 되었는지에 따라 동적으로 결정된다.

동일한 함수도 다양한 방식으로 호출할 수 있다

1. 일반 함수 호출
2. 메서드 호출
3. 생성자 함수 호출
4. Function.prototype.apply/call/bind 메서드에 의한 간접 호출

일반 함수 호출

기본적으로 this에는 전역 객체가 바인딩 된다.

전역 함수는 물론이고 일반 함수로 호출하면 함수 내부의 this에는 전역 객체가 바인딩된다.

• 메서드 내에서 정의한 중첩 함수도 일반 함수로 호출되면 전역 객체 바인딩
• 콜백 함수가 일반 함수로 호출된다면 콜백 내부의 this에도 전역 객체 바인딩

중첩 함수나 콜백 함수의 경우 외부 함수를 돕는 헬퍼 함수의 역할을 하므로 외부 함수의 일부 로직을 대신하는 경우가 대부분이다. 외부 함수와 중첩 함수의 this가 일치하지 않다는 것은 헬퍼 함수로 동작하기 어렵게 만든다.

이런 문제를 해결하는 방법은

• this를 변수에 할당해서 사용하거나
• this를 명시적으로 바인딩할 수 있는 메서드를 사용한다.
• 화살표 함수를 사용해서 this 바인딩을 일치 시킨다.
  • 화살표 함수 내부의 this는 상위 스코프의 this를 가리킨다

메서드 호출

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

• 프로토타입 메서드 내부에서 사용된 this도 결국 해당 메서드를 호출한 객체에 바인딩된다.

생성자 함수 호출

생성자 함수 내부의 this에는 생성자 함수가 생성할 인스턴스가 바인딩된다.

• 생성자 함수를 정의하고 new를 붙이지 않고 호출하면 일반 함수로 동작한다.

Function.prototype.apply/call/bind 메서드에 의한 간접 호출

apply

• 주어진 this 바인딩과 인수 리스트 배열을 사용하여 함수를 호출

call

• 주어진 this 바인딩과 ,로 구분된 인수 리스트를 사용하여 함수를 호출

apply와 call 메서드의 본질적인 기능은 함수를 호출하는 것이다. 함수를 호출하면서 첫 번째 인수로 전달한 특정 객체를 호출한 함수의 this에 바인딩한다.

apply와 call 메서드의 대표적인 용도는 arguments 객체와 같은 유사 배열 객체에 배열 메서드를 사용하는 경우다.

function convertArgsToArray() {
	console.log(arguments);
	
	// arguments 객체를 배열로 변환
	const arr = Array.prototype.slice.call(arguments);
    // const arr = Array.prototype.slice.apply(arguments);
	console.log(arr);

	return arr;
}

convertArgsToArray(1,2,3);

bind

• 함수를 호출하지 않는다. 다만 첫 번째 인수로 전달한 값으로 this 바인딩이 교체된 함수를 새롭게 생성해 반환한다.
• 메서드의 this와 메서드 내부의 중첩 함수 또는 콜백 함수의 this가 불일치하는 문제를 해결하기 위해 유용하게 사용된다.

const person = {
	name: 'Lee',
	foo(callback) {
		setTimeout(callback.bind(this),100);
	}
};

person.foo(function () {
	console.log(`Hi! my name is ${this.name}.`);
	// Hi! my name is Lee.
});

함수 호출 방식에 따른 this 바인딩을 정리해보면,

함수 호출 방식	this 바인딩
일반 함수 호출	전역 객체
메서드 호출	메서드를 호출한 객체
생성자 함수 호출	생성자 함수가 생성할 인스턴스
Function.prototype.apply/call/bind 메서드에 의한 간접 호출	Function.prototype.apply/call/bind 메서드에 첫 번째 인수로 전달한 객체

마치며

자바스크립트 this는 성격이 조금 특이한 것 같다. 호출 방식에 따라 결정되는 this를 잘 숙지해두자. 은근 면접 질문으로도 자주 나오는 것 같다.

참고 문헌

- 이웅모. 『모던 자바스크립트 Deep Dive』. 위키북스, 2020.