[Javascript] 클래스 상속

클래스 상속 왜 필요한건데?

✔️ 기존에 존재하는 클래스를 토대로 새로운 클래스를 만들고 싶을 때 사용함.

extends 키워드

✔️ 다른 클래스로 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의 프로퍼티를 상속받는 Rabbit class 만들기
class Rabbit extends Animal{
  hide(){
    alert(`${this.name} 이 숨었습니다`);
  }
}

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

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

메서드 오버라이딩

✔️ 부모 메서드를 호출하고 싶을 때

✔️ super 키워드를 사용!

❗️응용 버전 실패. 다시 해보기

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}은 멈췄습니다. 지금 속도는 ${this.speed} 입니다.`);
  }
}

//이 Animal 클래스의 프로퍼티들을 상속받을 클래스 생성

class Rabbit extends Animal{
	get hide(place){
      this.place = place;
      alert(`${this.name}이 ${this.place} 에 숨었습니다.`);
    }
    set hide(place){
    	if(this.place.length > 5){
        	alert('이곳엔 숨을 수 없습니다');
        }
    	return alert(`${this.name}이 ${this.place} 에 숨었습니다.`);
    }
}

 

생성자 오버라이딩

✔️ 클래스를 상속받게 되면 기본적으로 부모의 constructor을 호출한다.

✔️ 자식 클래스에 새 생성자를 만들 때 super() 을 호출한 후 this로 추가해줘야 한다.

class Animal {
  constructor(name){
    this.speed = 0;
    this.name= name;
  }
}

class Rabbit extends Animal{
  constructor(name, earLength){
    super(name);
    this.earLength = earLength;
  }
}

 

요약

1. 클래스 상속하기

• class Child extends Parent
• Child.prototype.__proto__ 가 Parent.prototype이 되므로 메서드 전체가 상속된다.

2. 생성자 오버라이딩

• this를 사용하기 전에 Child 생성자 안에 super()로 부모 생성자를 반드시 호출해야 한다.

3. 메서드 오버라이딩

• Child에 정의된 메서드에서 super.method()를 사용해 Parent에 있는 메서드를 사용할 수 있다.

❗️ 화살표 함수에는 super를 사용할 수 없다.

 

 

Reference

• https://ko.javascript.info/class-inheritance