[WHAT]JavaScript의 prototype

자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어입니다. 또한, 자바스크립트는 객체 기반의 프로그래밍 언어로써 자바스크립트를 이루고 있는 거의 모든 것이 객체입니다. 자바스크립트는 프로토타입을 기반으로 상속을 구현합니다.

생성자 함수가 생성한 모든 인스턴스는 자신의 프로토타입의 모든 프로퍼티와 메서드를 상속받습니다. 상속은 코드 재사용 측면에서 매우 중요한 요소로 생성자 함수가 생성하는 모든 인스턴스는 공통으로 사용할 프로퍼티와 메서드를 공유할 수 있습니다.

지금부터 자바스크립트의 상속에서 빠질 수 없는 프로토타입에 대해 알아보도록 하겠습니다.

프로토타입 객체

프로토타입은 상위 객체의 역할을 하는 객체로서 다른 객체에 공유 프로퍼티를 제공합니다. 하위 객체는 프로토타입의 프로퍼티에 접근 가능하며 이를 자신의 프로퍼티처럼 사용 가능합니다. 객체가 생성되는 방식에 따라 프로토타입이 결정되며 [[Prototype]]에 저장됩니다. 모든 객체는 하나의 프로토타입을 가지며 객체, 프로토타입, 생성자 함수는 서로 연결되어 있습니다.

객체는 [[Prototype]]에 직접 접근할 수 없지만 proto 접근자 프로퍼티를 통해 자신의 프로토타입에 접근 가능합니다.

프로토타입에 접근하기 위해 proto 접근자 프로퍼티를 사용하는 이유는 상호 참조에 의해 프로토타입 체인이 생성되는 것을 방지하기 위해서입니다. 프로토타입 체인은 순환이 되어서는 안되며 단방향 형태로만 이루어져야 합니다.

코드 내에서 proto 접근자 프로퍼티를 사용하는 것은 권장되지 않습니다. 그 이유는 모든 객체가 proto 접근자 프로퍼티를 사용할 수 있는 것이 아니기 때문입니다.

함수 객체의 prototype 프로퍼티

함수 객체는 유일하게 prototype 프로퍼티를 가지며 생성자 함수가 생성할 인스턴스의 프로토타입을 가리킵니다. non-constructir인 화살표 함수와 메서드 축약 표현으로 정의한 함수는 prototype 프로퍼티를 갖지 않으며 프로토타입을 생성하지 않습니다. 또한, 일반 함수도 prototype 프로퍼티를 가지고 있지만 객체를 생성하지 않으므로 아무런 의미를 갖지 않습니다.

모든 객체가 가지는 proto 접근자 프로퍼티와 함수 객체의 prototype 프로퍼티는 동일한 프로토타입을 가리킵니다. 하지만 이 두 프로퍼티는 사용하는 주체가 다릅니다.

프로토타입의 생성 시점

모든 객체는 생성자 함수와 연결되어 있습니다. 프로토타입은 생성자 함수가 생성되는 시점에 같이 생성됩니다. 프로토타입과 생성자 함수는 단독으로 존재할 수 없고 언제나 쌍으로 존재하기 때문입니다.

프로토타입 체인

자바스크립트는 객체의 프로퍼티에 접근할 때 해당 객체에 접근하려는 프로퍼티가 없을 경우 [[Prototype]] 내부 슬롯의 참조를 따라 프로토타입의 프로퍼티에 접근합니다. 이를 프로토타입 체인이라 하며 프로토타입 체인은 자바스크립트가 객체지향 프로그래밍의 상속을 구현하는 메커니즘입니다.

프로토타입 체인의 종점은 항상 Object.prototype입니다. Object.prototype에서도 프로퍼티를 찾지 못하는 경우에도 에러를 발생하는 것이 아닌 undefined를 반환하므로 이점에 주의해야 합니다.

오버라이딩과 프로퍼티 섀도잉

프로토타입이 소유한 프로퍼티를 프로토타입 프로퍼티라고 하며, 인스턴스가 소유한 프로퍼티를 인스턴스 프로퍼티라고 합니다. 프로토타입 프로퍼티와 동일한 이름의 프로퍼티를 인스턴스에 추가하면 인스턴스 프로퍼티에 이를 추가합니다. 이를 오버라이딩이라 하며 상속 관계에 의해 프로퍼티가 가려지는 현상을 프로퍼티 섀도잉이라 합니다.

참고

이웅모, ⌈모던 자바스크립트 - Deep Dive⌋, 2020, 19_프로토타입(p.260 - 311)