13. Javascript 객체지향 프로그래밍(3) - 클래스 기반 상속 구현 1

 

이번 아티클부터는 클래스 기반의 상속 체계를 만들어 보겠습니다. 앞서 배운 프로토타입 기반의 상속 과정과의 차이는, 객체 리터럴이 아닌 클래스 역할을 하는 함수를 통해서 상속을 구현한다는 점입니다. 글로만 읽어서는 와닿는 개념은 아닙니다. 우선 예제를 살펴보도록 합시다.

 

 

function Rapper(arg){
    this.rapName = arg;
}

Rapper.prototype.setName = function(value) {
    this.rapName = value;
};

Rapper.prototype.getName = function() {
    return this.rapName;
};

function Smtm(arg){

}

var hype = new Rapper("SIMON D");
console.dir(hype);

Smtm.prototype = hype;

var youngKing = new Smtm("QM");
console.dir(youngKing);
youngKing.setName("QM");
console.dir(youngKing);
console.log(youngKing.getName());

 

위의 예제를 차근차근 살펴봅시다. 우선 rapName이라는 프로퍼티를 가진 Rapper 생성자 함수를 선언했습니다. 그리고, Rapper함수의 prototype에 setName( )과 getName( ) 메서드를 선언했습니다. 그러고 나서 Rapper를 [[Prototype]]으로 하는 객체 hype를 생성했습니다. 여기서 다시 복습해 봅시다. hype라는 객체의 [[Prototype]]은 무엇을 참조할까요? 바로 Rapper.prototype입니다. 

 

그리고 잘 살펴보면 역시 생성자 함수 형태를 취하고 있는 함수 Smtm이 있습니다. 여기에서 특이한 것은, Smtm이라는 생성자 함수의 prototype이 hype 객체를 참조하도록 선언했다는 점 입니다. 이 상태에서, 생성자 함수 Smtm을 통해 또 다른 자식 객체인 youngKing을 선언했습니다. 자, 다시 한번 살펴보겠습니다. 여기서 객체 youngKing의 [[Prototype]]은 무엇이 될까요? Smtm.prototype이 됩니다. 그리고 Smtm.prototype은 곧 hype를 참조합니다. 즉, youngKing의 [[Prototype]]은 객체 hype가 됩니다. 

 

 

단,  여기서 불완전한 부분을 하나 찾을 수 있습니다. Smtm 생성자 함수를 통해서 youngKing을 생성할 때, 빈 생성자 함수 Smtm(arg)를 통해 생성하기 때문에 실제로 youngKing 객체는 아무런 값도 존재하지 않습니다. 즉, Rapper 함수가 행하는 초기화는 이루어지지 않는다는 의미입니다. youngKing.setName("QM")을 실행하는 순간이 되어야 rapName에 "QM"이라는 값이 대입됩니다. 이 문제를 해결하는 방법은 다음 아티클에서 계속 살펴보겠습니다.