[JavaScript] 클래스 상속을 이용한 확장(extends)

 

클래스 상속을 이용해서 확장하는 법을 알아보자!

 

 

 클래스 상속을 이용한 확장 

 

class Animal {
  constructor(name) {
    this.speed = 0;
    this.name = name;
  }
  run(speed) {
    this.speed = speed;
    alert(`${this.name} 은/는 속도 ${this.speed}로 달립니다.`);
  }
  stop() {
    this.speed = 0;
    alert(`${this.name} 이/가 멈췄습니다.`);
  }
}

let animal = new Animal("동물");

 

 

객체 animal과 클래스 Animal의 관계를 그림으로 나타내면 다음과 같다.

 

 

 

 

Animal을 상속받는 또다른 클래스 Rabbit를 만들어볼 것이다.

토끼는 동물이므로 Rabbit은 동물 관련 메서드가 담긴 Animal을 확장해서 만들 것이다.

이런식으로 확장을 하기 위해서는, 클래스 확장 문법 class Child extends Parent를 사용하면 된다.

 

class Rabbit extends Animal {
  hide() {
    alert(`${this.name} 이/가 숨었습니다!`);
  }
}

let rabbit = new Rabbit("흰 토끼");

rabbit.run(5); // 흰 토끼 은/는 속도 5로 달립니다.
rabbit.hide(); // 흰 토끼 이/가 숨었습니다!

 

엔진은 아래와 같은 절차를 따라  rabbit.run의 존재를 확인한다. 

1. 객체 rabbit에 run이 있나 확인한다. → 없다!
2. rabbit의 프로토타입인 Rabbit.prototype에 메서드가 있나 확인한다. → hide만 있다!
3. extends를 통해 관계가 만들어진 Rabbit.prototype의 프로토타입인 Animal.prototype에 메서드가 있나 확인한다. → 있다! 

 

클래스 Rabbit을 사용해 만든 객체는 rabbit.hide() 같은 Rabbit에 정의된 메서드에도 접근할 수 있고,

확장을 했기 때문에, rabbit.run() 같은 Animal에 정의된 메서드에도 접근할 수 있다.

 

 

키워드 extends는 프로토타입을 기반으로 동작한다.

 extends는 Rabbit.prototype.[[Prototype]]을 Animal.prototype으로 설정한다. 

그렇기 때문에 Rabbit.prototype에서 메서드를 찾지 못하면 Animal.prototype에서 메서드를 가져오는 것이다.

 

그림을 아래부터 보면 된다.