Code States TIL - Inheritance

Inheritance는 이미 있는 class에 추가적인 요소들을 추가하거나 변경한 새로운 class를 만드는 방법입니다. 위키백과에서는 '객체들 간의 관계를 구축하는 방법'이라고 정의했네요. 비유하자면 생물을 분류하는 방법과 비슷합니다.

상속받은 객체는 파생클래스, 서브클래스, 또는 자식클래스라고 하고, 상속 해준 클래스는 기반클래스, 수퍼클래스, 또는 부모클래스라고 부릅니다. 자식클래스에서는 부모클래스 안의 속성이나 함수들을 사용할 수 있습니다. 예를 들면 개, 고양이, 닭 같은 여러 동물에 대한 클래스를 만들때 이 동물들의 공통적인 요소들을 모아둔 동물이라는 클래스를 만들고 이 클래스를 상속받는 클래스들을 만들어 개, 고양이 등을 구현할 수 있습니다.

지금의 Javascript에서는 class 관련 문법이 추가되어 쉽게 구현할 수 있지만, 그 이전에는 약간 편법적인 방법으로 구현할 수 있었습니다.

function Parent(val){
  this.parProp=val;
}
Parent.prototype.func1=function(){
  dosomething
}
function Child(val){
  this.childProp=val;
}
Child.prototype=Object.create(Parent.prototype);
//Parent.prototype을 복제해서 새로운 객체를 만들고 Child.prototype에 달아줍니다.

과 같은 식으로 Parent의 함수를 Child에서도 사용이 가능해집니다. 하지만 이럴 경우 Child의 __proto__가 되면서 Child의 constructor까지도 Parent를 가리키게 되므로 제대로된 생성이 불가능해집니다. 이를 해결하기 위해서는

Child.prototype.constructor=Child

까지 뒤에 붙여주어야 합니다. 또 위에서는 부모의 속성까지 가져올 수 있다고 했는데 지금 상황에서는 Child에는 childProp이라는 속성은 있지만 parProp이라는 속성은 없습니다. 이를 해결하려면

function Child(val1,val2){
  Parent.call(this,val1); 
  // 또는 Parent.apply(this,[val1]); 같이 배열로 묶어서
  this.childProp=val2;
}

같은 식으로 call이나 apply로 부모의 함수를 this와 호출해주면 되겠습니다.

함수의 overriding은 자식에서 정의된 함수가 부모에서 정의된 같은 이름의 함수를 덮어쓰는 것입니다. 동물의 예시를 들면 동물이라는 클래스에서 move()라는 함수를 만들어 놓고, 뱀에서는 move() 를 기어가는 것으로 덮어쓰고 나비에서는 펄럭거리며 날아가는 것으로 덮어쓰고 하는 식이겠습니다. 이 부분에서도 Parent.prototype.func1.call(this,arg1,arg2)나 Parent.prototype.func1.apply(this,args) 같은 부분을 이용해서 부모의 함수를 이용할 수 있습니다.

그런데 이제는 class라는 키워드가 추가되었으므로

class Parent{
  constructor(val){
    this.parProp=val;
  }
  func1(){
    dosomething
  }
}

class Child extends Parent{
  constructor(val1, val2){
    super(val1); // 부모 클래스의 생성자를 호출합니다.
    this.childProp=val2;
  }
  func1(){
    super.func1(); // 부모 클래스의 func1을 호출합니다.
    dosomethingelse;
  }
}

같은 식으로 구현하면 되겠습니다.