프로토타입 및 프로토타입 체인에 대해 이해하기

프로토타입

프로토타입은 콘솔창을 통해 디버깅을 하다보면 보게 되실수 있을겁니다. 

자바스크립트의 객체는 부모 역할을 담당하는 객체와 연결되어있습니다. 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있습니다. 이런 부모 객체를 프로토타입 객체 또는 줄여서 프로토타입이라고 부릅니다. ECMAScript spec 에서 자바스크립트의 객체는 자신의 프로토타입(부모로부터 물려받은)을 가리키는 [[Prototype]]이라는 숨겨진 프로퍼티를 가진다라고 되어있습니다. 크롬, 파이어폭스에서는 [[Prototype]]을 _proto_로 나타냅니다. 

function A() {};

var A = new A();

console.log(A);

위 코드를 실행하고 콘솔창을 확인하면 

이러한 내용을 확인 하실수 있습니다. 여기서 __proto__ 와 constructor를 주의깊게 보셔야 합니다. __proto__가 바로 A 라는 객체를 만들어 내기 위해 사용된 객체 원형에 대한 숨겨진 연결입니다. 해당객체의 프로토타입은 A라는 함수객체이며 이 객체의 생성자 역시 function A() 함수라는 것입니다. 즉 new Operator를 통해 만들어진 객체는 function A()를 자신의 프로토타입으로 사용하여 만들어졌다는 이야기입니다.

프로토타입 체인

객체의 생성 과정에서 모택 되는 프로토타입과의 연결고리가 이어져 상속관계를 통하여 상위 프로토타입으로 연속해서 이어지는 관계를 프로토타입 체인이라고 합니다. 이 연결은 __proto__를 따라 올라가게 됩니다.

즉 프로토타입 체인이란 위에서 봤던 프로토타입을 상속해서 만들어지는 객체들과의 연관관계를 의미합니다. __proto__의 프로퍼티들을 따라 올라가다 보면 최종적으로 Object 객체의 prototypeObject에 다다르게 됩니다. 그렇기 때문에 자바스크립트의 모든 객체는 Object 객체에서부터 파생되어 나온 자식들이라고 하는 것입니다.

이러한 프로토타입 체인은 하위 객체에서 상위객체의 프로퍼티와 메소드를 상속받습니다. 그리고 동일한 이름의 프로퍼티와 메소드를 재정의 하지 않는 이상 상위에서 정의한 내용을 그대로 물려받습니다. 

var A = function () { };

A.prototype.x = function () {

     console.log('hello');

};

var B = new A();

var C = new A();

B.x();

> hello 

C.x();

> hello 

A.prototype.x = function () {

     console.log('world');

};

B.x();

> world

C.x();

> world

위 예제를 통해서 A의 Prototype Object 의 x 메소드를 재정의 하였을 때 B,C 객체도 그 영향을 받는다는 것을 알 수 있습니다. 그 이유는 프로토타입 체인에 의한 공유 때문입니다. 

그림을 통해 프로토타입 체인의 과정을 살펴 보겠습니다. 여기서 A prototype Object가 소유한 Constructor는 A 객체의 생성자 함수입니다. 즉 이를 통해 만들어 지는 겍채들은 A 객체가 생성될 당시 소유하고 있지 않은 X 라는 메소드를 가질수 없습니다. X는 A.prototype 을 이용하여 A Prototype Object에 추가 되어진 메소드 이기 때문입니다. 하지만 이 X 메소드는 프로토타입 체인에 의한 공유 메소드입니다. A의 Prototype Object가 소유한 X라는  메소드는 A prototype Object 를 프로토타입으로 만들어진 모든 객체에서 사용할 수 있습니다. 이는 프로토타입 기반 상속에서 매우 중요한 특성입니다. 

위 예제에서 사용한 X 라는 메소드를 하위객체에서 찾지 못하면 상위객체에서 해당 메소드를 탐색합니다. 이러한 방법으로 프로토타입 체인을 따라 최상위 객체까지 탐색하게 되고 최상위 객체에서도 해당 메소드를 찾지 못한다면 undefined가 되는 것입니다.