10. Javascript 프로토타입 체이닝 (1) - 프로토타입이 뭐지?

 

 

Javascript는 기본적으로 프로토타입 기반의 객체 지향 프로그래밍을 지원합니다. JAVA나 C# 등의 여타 프로그래밍 언어의 상속 체계 등에 익숙한 사람이라면, 오히려 혼란스러워질 수 있는 구조를 갖고 있죠. 프로토타입 체이닝을 주제로 한 아티클에서는 Javascript에서 OOP 기능을 제공하는 기본 원리인 프로토타입과 프로토타입 체이닝을 살펴보도록 하겠습니다.

 

기존 언어와 비교해보도록 하겠습니다. 우선, Javascript 역시 ‘부모’객체와 ‘자식’ 객체의 개념을 사용할 수 있습니다. 하지만 다른 언어와의 차이점은, 객체를 생성하는 방식입니다.

 

근본적인 차이점은 바로 클래스의 개념이 없다는 점이죠. 이제까지 살펴본 내용을 되짚어보면, 객체를 리터럴 방식으로 선언하거나 생성자 함수를 사용해 생성했습니다. 하지만 이렇게 생성된 객체들은 프로토타입 객체를 통해 자신의 부모 객체에 접근하고, 부모 객체의 프로퍼티와 메서드를 사용할 수 있게 됩니다. 다른 언어에서 보여주는 상속 개념이 동일하게 구현되는 것이죠.

 

 

프로토타입 객체

 

앞선 아티클에서 반복적으로 다루었던 내용이지만, 다시 한 번 정리하겠습니다. 그만큼 중요하면서 Javascript의 근간을 이루는 개념이 바로 프로토타입 객체입니다.

 

우선, Javascript의 모든 객체는 자신의 부모역할을 하는 프로토타입 객체와 연결하는 암묵적 프로토타입 링크(implicit prototype link)를 갖습니다. 모든 객체의 [[Prototype]] 프로퍼티에 저장되죠. 이는 자신을 생성한 생성자 함수의 prototype 프로퍼티가 가리키는 prototype 객체입니다. 예제 코드를 살펴보겠습니다. 

 

// 생성자 함수
function Rapper(rapName){
    this.rapName = rapName;
}

// 객체 생성
var tablo = new Rapper('TABLO');

console.dir(Rapper);
console.dir(tablo);

 

프로토타입을 다룬 초기 아티클에서도 설명했지만, 생성자 함수 Rapper의 prototype 프로퍼티는 함수 자기 자신과 연결되는 프로토타입 객체(Rapper.prototype)를 가리킵니다. 그리고 해당 프로토타입 객체에는 별도로 constructor 프로퍼티가 존재하고, 이는 함수 Rapper를 가리킵니다( function Rapper(rapName) ). 그리고 생성자 함수 Rapper를 통해 생성된 객체인 tablo는 위에서 설명한 생성자 함수 Rapper의 prototype 객체를 [[Prototype]]으로 연결하게 됩니다. 

 

결과적으로, Rapper의 프로토타입 프로퍼티와 tablo의 [[Prototype]]은 같은 객체를 가리키게 되는 구조가 형성되는 것이죠. 조금 복잡한 설명 같지만, 굉장히 간단한 이야기입니다.