[JS Deep Dive] this

David Oh·2022년 12월 9일

MegabyteSchool 개발자취업부트캠프 국비지원교육 내일배움카드 메가바이트스쿨 패스트캠퍼스

JS Deep Dive

목록 보기

4/6

this 키워드

객체 : 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조

( 객체 = 프로퍼티 + 메서드 )

동작을 나타내는 메서드는 자신이 속한 객체의 상태인 프로퍼티를 참조하고 변경할 수 있어야 합니다.

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

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

 const circle = {
	radius : 5,
	getDiameter(){
		// 해당 메서드가 자신이 속한 객체의 프로퍼티나 다른 메소드를 참조하려면
    // 자신이 속한 객체인 circle을 참조할 수 있어야 합니다.
		return 2 * circel.radius;
	}
}

이러한 경우 처럼 자신이 속한 객체를 재귀적으로 참조하는 방식은 바람직하지 않습니다.

객체 리터럴이 아닌 생성자 함수 방식으로 객체를 만드는 경우에는 이러한 식별자가 정의되어 있지 않아 호출하는데 의문을 품을 것입니다.

function Circle(radius){
	// 해당 시점에서 생성자 함수 자신이 생성할 인스턴스를 가리키는 식별자를 알 수 없다.
	????.radius = radius
} 

Circle.prototype.getDiameter = function(){
	// 해당 시점에서 생성자 함수 자신이 생성할 인스턴스를 가리키는 식별자를 알 수 없습니다.
	return 2 * ????.radius
}

// 생성자 함수로 인스턴스를 생성하기 위해서는 먼저 생성자 함수를 정의해야 합니다.
const cirecle = new Circle(5)

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

하지만 생성자 함수는 정의된 이후 다시 해당 생성자 함수를 호출하여 인스턴스를 생성하게 됩니다.

생성자 함수를 정의하는 시점에는 인스턴스가 생성되기 전이므로 생성될 인스턴스를 가리키는 식별자를 알 수 없습니다.

따라서 이러한 모순을 해결하기 위해 this를 사용하게 됩니다.

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

this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있습니다.

함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달됩니다. 함수 내부에서 arguments 객체를 지역 변수처럼 사용할 수 있는 것처럼 this 역시도 지역 변수처럼 사용할 수 있습니다.

그러나 this가 가리키는 값, this 바인딩은 함수 호출 방식에 의해 동적으로 결정됩니다.

바인딩 : 식별자와 값을 연결하는 과정, 변수 선언은 변수 이름과 메모리 공잔의 주소를 바인딩하는 것입니다. this 바인딩은 this와 this가 가리킬 객체를 바인딩하는 것을 의미합니다.

객체 리터럴의 메서드 내부에서 this는 메서드를 호출한 객체를 가리킵니다.

생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킵니다.

해당 this는 상황에 따라 가리키는 대상이 다릅니다.

클래스 기반 언어에서 this는 언제나 클래스가 생성하는 인스턴스를 가리킵니다.
하지만, 자바스크립트는 함수가 호출되는 방식에 따라 this에 바인딩된 값, 즉 this 바인딩이 동적으로 결정됩니다.

일반 함수 내부의 this는 undefined가 바인딩 되며, 일반 함수 내부의 this는 사용할 필요가 없습니다.

함수 호출 방식과 this 바인딩

this 바인딩은 함수 호출 방식에 따라 동적으로 결정됩니다.

렉시컬 스코프 : 함수의 상위 스코프를 결정하는 방식

렉시컬 스코프는 함수의 정의가 평가되어 함수 객체가 생성되는 시점에 상위 스코프를 결정합니다.

하지만 이와 달리 this 바인딩은 함수를 호출하는 시점에 결정됩니다.

일반 함수 호출

this에 전역 객체(window)가 바인딩 됩니다.

strict mode가 적용된 경우에는 undefined가 바인딩됩니다.

function cal(){
	console.log(this) // window
}

객체의 메서드 안에서 정의된 함수의 경우에는 window가 바인딩 됩니다.

이러한 경우, 메서드 내의 this는 해당 객체를 바인딩하지만, 함수의 this는 window가 바인딩 되기 때문에 this가 일치하지 않는 치명적인 일이 발생합니다.
- 이는 특히 콜백함수에서 문제가 됩니다.
- 따라서 아래 setTimeout과 같은 일반함수의 내부에는 this를 담는 변수를 이용하도록 만듭니다.
```
const obj = {
	value : 100,
  cal() {
		const that = this

		setTimeout(function (){
			console.log(that.value)
		}, 1000)
	}
}
```
- 이외에도 { this.method }.bind/call/apply()를 사용하여 명시적으로 객체의 this를 지칭하도록 만듭니다.
- 또는 화살표 함수를 사용하여 this를 바인딩할 수 있습니다.

메서드 호출

메서드를 호출할 때 메서드 이름 앞의 객체가 this에 바인딩됩니다.

메서드를 소유한 객체가 아니라 메서드를 호출한 객체임을 주의해야합니다.

객체의 메서드라는 프로퍼티가 가리키는 함수 객체는 생성자 함수로 생성된 객체와 독립적으로 존재합니다.
- 따라서 해당 함수 객체는 다른 객체를 이용하여 호출할 수 있으며 이 떄 다른 객체에 해당 함수가 바인딩 됩니다.

const person = {
	name : 'Oh',
	getName() {
		return this.name
	}
}

console.log(person.getName()) // Oh

이러한 메서드는 함수 선언문으로써 변수에 할당될 수 있습니다.
또한, 프로토타입 메서드 내부에서 사용된 this들 역시도 해당 메서드를 호출한 객체에 바인딩됩니다.
생성자명.prototype.method()와 같은 형태로 메서드를 호출한 경우, 생성자명.prototype이 객체가 됩니다.
- 따라서 method() 내부의 this는 해당 프로토타입을 참조합니다.