자바스크립트 class의 상속(Inheritance)과 오버라이딩 (overriding)

00.class의 상속이란?

class는 인스턴스를 효율적으로 생성함 이외에도 추가적인 기능이 있습니다.
바로 상속을 통해 다른 class의 기능을 물려주고, 받는 것 입니다.

상속 받는 class => subclass , derived class
상속 하는 class => superclass , base class

이 둘은 부모와 자식관계로 표현되기도 합니다.

---

01. 상속관계를 이해하기 위한 예시

Ape(유인원)이라는 superclass로부터 상속 받는 subclass(human)를 작성해봤습니다.

//supperclass 상속하는 클래스

class Ape {
  constructor(이름, 서식지, 천적) {
    this._이름 = 이름;
    this._서식지 = 서식지;
    this._천적 = 천적;
  }
  speak() {
    console.log(`${this._이름} : 천적은 ${this._천적}!`);
  }
}

//subclass 상속 받는 클래스

class human extends Ape {   //상속시 반드시 extens를 사용하여야합니다.
  constructor(이름, 서식지) {	//상속받는 클래스의 생성자, 사람은 천적이 없죠?!
    super(이름, 서식지, '없습니다'); //spuer을 사용하여,
//상속하는 클래스의 생성자와 싱크를 맞춰줄 필요가 있습니다.
  }
}

// 상속 받는 클래스를 통하여 인스턴스 생성
let human01 = new human('홍길동', '구로디지털단지');
//
human01.speak(); // 홍길동 : 천적은 없습니다!

human 클래스 안에 동적 메소드(speak())가 없음에도 불구하고,

super클래스인 Ape로부터 speak()를 물려받아 잘 작동하는 모습입니다.

이때 반드시 super을 작성하여 상위 클래스와의 싱크를 맞춰줄 필요가 있습니다.

---

02. 오버라이딩 (overriding)

"상속관계에서 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의해서 사용하는 기술"

부모로 부터 상속받은 메서드 등을 자식클래스에서 수정, 첨삭,덮어쓰기 하여 사용한다고 생각하면 쉽습니다.

//subclass 상속 받는 클래스
class human extends Ape {
  constructor(이름, 서식지, 취미) {
    super(이름, 서식지, '없습니다');
    this._취미 = 취미;
  }
  speak() {
    console.log(`${this._이름} : 제 취미는 ${this._취미}입니다!`);
  }
}
let human01 = new human('홍길동', '구로디지털단지', '노마드코더 영상시청');
human01.speak();//홍길동 : 제 취미는 노마드코더 영상시청입니다!

첫 번째 예제를 오버라이딩하여, speak메서드의 console.log가 다른 형태로 찍히도록했습니다.