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

 

앞서 살펴본 예제에서, 클래스 기반의 상속을 가장 기본적인 형태로 구현해 보았습니다. 그리고 이 구조는 하위 인스턴스 생성 단계에서 부모 클래스의 생성자를 호출하는 과정이 없어서 문제가 된다는 점도 확인했습니다. 예제를 아래와 같이 다시 한번 살펴보겠습니다. 

 

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());

 

즉, 위의 라인을 기준으로 var youngKing = new Smtm("QM"); 라인은 객체를 생성하기는 하지만 실제로 여기에서 전달되는 "QM"이라는 값은 아무런 역할도 하지 않게 된다는 점을 지적했습니다. 여기서 우리는 Smtm 생성자 함수를 사용할 때, Rapper 생성자 함수도 호출되는 구조를 만들어야 합니다. 

 

 

---

 

위의 라인 중, Smtm(arg) { } 생성자 함수 선언부가 있습니다. 여기에 arg라는 파라미터에 "QM"이라는 값이 전달되었지만, 아무런 동작도 선언되어 있지 않기 때문에 생기는 문제였습니다. 그럼, 여기에서 다음과 같은 내용을 추가해 보도록 하겠습니다. 

 

function Smtm(arg){
    Rapper.apply(this, arguments);
}

 

이제 위의 예제에 생성자 함수 Smtm(arg) { }; 에 위와 같은 라인을 추가하였다면 어떤 일이 벌어지게 되는지 살펴보겠습니다. 우선, 위의 코드에서 new 키워드를 통해 생성자 함수로서 위의 Rapper.apply(this, arguments)가 실행되면 어떤 동작이 일어나게 될까요? apply 함수를 배웠을 때의 기억을 다시 떠올려 봅시다.

 

우선 첫 번째 파라미터에는, apply를 통해 실행되는 함수에서 선언된 this에 어떤 객체가 바인딩 되는지를 명시하게 됩니다. 여기서 잠시 헷갈릴 수 있는데, "Rapper 함수 내에서 정의된 this에는" this가 바인딩됩니다. 자, 여기서 정신을 잘 차리고 봅시다. Smtm(arg) { }; 라는 생성자 함수가 new를 통해서 실행될 때 기본적으로 this는 무엇을 가리킬까요? 바로 생성자 함수 Smtm을 통해 생성되는 새로운 객체를 의미하게 됩니다. 여기서는 youngKing이라는 객체가 되겠네요.

 

두 번째 파라미터에는 arguments가 들어가 있습니다. 이 두 번째 파라미터는, Rapper라는 함수를 실행할 때 인자로 전달될 값을 의미합니다. 여기서는 arguments 전체를 인자값으로 전달했군요. 여기서는 Smtm(arg)에서 arg에 해당하는 값이 전달됩니다. 예제에서는 "QM"이 되겠네요.

 

이렇게 되었을 때, var youngKing = new Smtm("QM"); 라는 라인이 실행되면, 자연스럽게 youngKing이라는 객체 안에 rapName이라는 프로퍼티가 선언되며, 여기에는 "QM"이라는 값이 전달되어 자연스럽게 동일한 프로퍼티가 생성됩니다. 이제는 youngKing.setName("QM");라는 라인을 굳이 실행하지 않아도 됩니다. 

 

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

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

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

function Smtm(arg){
    Rapper.apply(this, arguments);
}

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());

 

하지만, 여기까지 왔어도 이 상속 구조에는 여전히 불완전한 점이 남아있습니다. 이 부분은 다음 아티클에서 살펴보도록 하겠습니다.