Prototype

JS는 프로토타입 기반언어라고 불리기도 한다.

이 프로토타입이란 무엇인지 어떤 메카니즘이 있는지 알아보자!!

---

[[Prototype]]

다들 객체를 console에 찍어본 경험이 한 번 정도는 있을 것이다.

이 때 객체를 찍어보면 정체불명의 [[Prototype]]이 같이 찍히게 된다.

이는 숨김 프로퍼티로 모든 JS 객체들이 가지고 있으며, 다른 객체를 참조하는 속성이다.

(null이 될 수도 있다.)

이 [[Prototype]]이 참조하는 객체를 프로토타입이라고 부른다.

일반적으로 객체들은 기본적으로 최상위 객체인 Object를 프로토타입으로 가지게 된다.

또한 이 Object는 프로토타입으로 null을 가지게 된다.

 

이 프로토타입은 JS에서 상속의 기능을 한다. 프로토타입의 메카니즘은 다음과 같다.

객체에서 프로퍼티를 참조한다.

만약 객체에 참조하려는 프로퍼티가 없는 경우 프로토타입에서 찾게 된다.

프로토타입에도 없는 경우 프로토타입의 프로토타입까지 찾게 되고,

프로토타입이 null이 될 때까지 이를 반복한다.
null이 될 때까지 찾지 못하면 해당 프로퍼티는 undefined가 된다.

이러한 동작 방식을 '프로토타입 상속'이라고 부른다.

 

참고로 최상위 객체인 Object에는 toString()함수(프로퍼티)가 존재하고,
프로토타입의 메카니즘에 따라 Object를 상속받는 객체들은 toString() 함수를 사용할 수 있다.
따라서 기본적으로 객체들은 toString 함수를 사용할 수 있는 것이다.

 

프로토타입의 메카니즘도 알아보았으니 코드로 살펴볼 차례이다.

프로토타입에는 다음과 같이 __proto__라고 하는 속성을 통해서 접근할 수 있다.

 

const instrument = {
    play: () => console.log(`연주`)
}

let piano = {
    keyboard: true
}

piano.__proto__ = instrument;
piano.play();

 

piano에는 play라는 프로퍼티가 없다.

따라서 piano의 프로토타입인 instrument에서 play 프로퍼티를 게 되고,

instrument의 play 프로퍼티가 실행되게 된다.

이 play와 같이 상속받은 프로퍼티를 상속 프로퍼티라고 부른다.

 

이러한 프로토타입은 순환 참조를 허용하지 않는다.
또한 __proto__의 값으로 객체와 null만 가능하다.

 

this

마지막으로 this에 대해 살펴보자!

 

const instrument = {
    name: '악기',
    play() {
        console.log(`${this.name} 연주`)
    }
}

let piano = {
    name: '피아노',
    keyboard: true,
    __proto__: instrument
}

instrument.play();
piano.play();

 

콘솔 출력 결과

 

악기 연주
피아노 연주

 

instrument.play()에서 this는 instrument를 가리킨다.

따라서 instrument.play()의 결과로 '악기 연주'가 출력된다.

piano.play()에서 this는 piano를 가리킨다.

따라서 piano.play()의 결과로는 '피아노 연주'가 출력된다.

 

즉, this는 자신을 호출한 객체를 참조하게 된다.

조금 더 쉽게 생각하면 . 앞에 있는 객체를 가리키게 된다.