자바스크립트: 객체지향 2 – 상속 구현 (ES5 이하)

• 자바스크립트: 객체지향 1 – new 키워드를 이용해 객체 생성 (ES5 이하)
• 자바스크립트: 객체지향 2 – 상속 구현 (ES5 이하)
• 자바스크립트: 객체지향 3 – class (ES6 이상)

상속에 대한 예제로 악기에 대한 추상 클래스(완벽하게 동일한 개념은 아니나 편의상 이하 객체지향 용어들을 사용합니다.) 를 작성해 보겠습니다.

function MusicalInstrument(){
  this.material = "추상적 재료"
}

MusicalInstrument.prototype.sound = function(){
  return "추상적 소리"
}

MusicalInstrument 클래스를 상속받는 StringInstrument에 대한 코드입니다. 추가적인 메소드로  소음을 내는 메소드를 만들어 봅시다.

function StringInstrument(){
    MusicalInstrument.apply(this, arguments)
}

StringInstrument.prototype.outOfTune = function(){
    return "바로크 비올라 소리"
}

MusicalInstrument.apply(this, arguments) 이 핵심입니다. apply는 이전에 작성한 글 자바스크립트: 배열 map, filter, apply + 예제: ABC(알파벳) 내비게이터 에서 설명되어 있습니다. 파라미터 this 부분은 해당 클래스 내부에서 this에 할당할 객체를 설정하는 부분입니다. StringInstrument의 this를 파라미터에 설정하면 MusicalInstrument 가 호출될 때 해당 클래스의 this는 실은 StringInstrument 의 this가 할당되어 동작하는 것입니다. 이러한 과정을 통해 상속이 이루어지는 것입니다. 만약 이 부분이 없다면 단순히 두 개는 별개의 클래스입니다.

그런데 실행하고 보니 상속받은 것처럼 보이긴 하는데 부모 클래스의 sound 메소드가 동작하지 않습니다.  프로토타입을 보니 자기 자신인 StringInstrument 를 가리키고 있습니다. 여기에 sound가 연결되지 않았으므로 겉으로는 상속된 것처럼 보이지만 지금은 이도 저도 아닌 상태입니다. 프로토타입을 부모 클래스로 바꿔 보겠습니다. 그리고 프로토타입이 교체되었으므로 앞서 만들었던 outOfTune 메소드는 위치를 바꾸겠습니다.

StringInstrument.prototype = new MusicalInstrument()

StringInstrument.prototype.outOfTune = function(){
    return "바로크 비올라 소리"
}

참고: new MusicalInstrument() 부분은 Object.create(MusicalInstrument) 로 대신하여 사용할 수 있습니다. 후자가 객체의 내부 구조를 보다 더 명확하게 정리한다고 합니다. (https://unikys.tistory.com/320)

이제 제대로 동작합니다. 다만 생성자(constructor) 부분이 MusicalInstrument인게 뭔가 찝찝합니다. 제 수준에서 자바스크립트의 생성자를 제대로 설명할 수 없지만, 이 부분에는 자기 자신의 인스턴스를 대표하는 요소들이 들어있어야 하는 곳이라고 생각하시면 됩니다. 찾아보면 자바스크립트의 한계로 생성자를 제대로 배정하지 못하는 문제라고 알려져 있습니다. 생성자를 부모 클래스 대신 자신의 클래스를 가리키도록 바꿔보겠습니다.

StringInstrument.prototype.constructor = StringInstrument

생성자 부분이 바뀐 것을 확인할 수 있습니다.

상속 절차를 마쳤으니 상속의 대표적 기술인 오버라이딩을 해보겠습니다. 오버라이딩은 단순히 상위 클래스의 메소드 이름과 동일하게 프로토타입을 설정하면 됩니다.

// 오버라이딩
StringInstrument.prototype.sound = function(){
    return "현악기 소리"
}

자식 클래스만으로도 이미 복잡한 구조이지만, 마지막으로 손자 클래스까지 만들어보도록 합시다. 바이올린 클래스를 만들어 보겠습니다. 전에 했던 일련의 과정들을 진행하되 대상만 StringInstrument > Violin 으로 변경하면 됩니다.

function Violin(){
    StringInstrument.apply(this, arguments)
}

Violin.prototype = new StringInstrument
Violin.prototype.sound = function(){
    return "바이올린 소리"
}
Violin.prototype.changeString = function(){
    return "E현 교체중.."
}

Violin.prototype.constructor = Violin

var vi1 = new Violin()

• 자바스크립트: 객체지향 1 – new 키워드를 이용해 객체 생성 (ES5 이하)
• 자바스크립트: 객체지향 2 – 상속 구현 (ES5 이하)
• 자바스크립트: 객체지향 3 – class (ES6 이상)