자바스크립트 프로토타입(Prototype)과 프로토타입 체인(Prototype Chain) 기초 다지기

본 내용에 들어가기 앞서, 자바스크립트는 클래스라는 개념이 없다. 기존의 객체를 복사하여 새로운 객체를 생성하는 프로토타입 기반의 언어이다. 즉, 프로토타입을 사용하여 새로운 객체를 만들어낸다. (참고로, ES6 표준에서 클래스 문법이 추가되었다.)

프로토타입이란?

한국어로는 단순히 원형(원래 형태)으로 번역된다. 말 그대로 객체의 원형이라고 할 수 있다. 자바스크립트의 객체지향 프로그래밍을 지탱하고 있는 핵심 개념이며, 이를 활용하여 상속 개념을 제공하고 있다.

[목표] 프로토타입의 기초를 다져보자

아래 코드를 보고 상상해보자. 'o' 객체의 'ultraProp' 프로퍼티에 접근했을 때 어떤 값이 출력될 것 같은가?

function Ultra(){}
Ultra.prototype.ultraProp = true;

function Super(){}
Super.prototype = new Ultra();

function Sub(){}
Sub.prototype = new Super();

var o = new Sub();
console.log(o.ultraProp);

정답은 true이다. Sub 함수의 코드를 보면 ultraProp 값이 정의되어 있지 않은데 true가 출력이 되었다. 어떻게 가능한 것일까?

Sub가 Super를 상속받고, Super가 Ultra를 상속받는다. 이때, Sub 함수에 접근하면 Sub라는 객체에는 ultraProp 값이 정의되어 이지 않아 내부적으로 Super 객체에 ultraProp 값이 있는지 확인한다. 만약 없다면 부모 객체인 Ultra 객체에서 찾게 된다. 이런 단계를 거쳐 Sub에 정의되지 않은 ultraProp의 값을 사용할 수 있는 것이다. (=prototype chain)

즉, 프로토타입은 여러 객체가 정의되어 있으며, 객체를 저장해놨다가 필요에 의해 new로 생성자를 호출한다. 이후 자바스크립트는 생성자 함수의 프로토타입에 저장되어있는 객체를 꺼내서 값을 리턴한다.

 

ps. 해당 게시글은 프로토타입의 완전 기초만 다루고 있기 때문에 이 게시글을 이해했다고 프로토타입을 완벽하게 이해했다고 생각하면 안된다. 프로토타입의 영역은 훨씬 더 깊고 넓기 때문이다.