클래스 상속

아!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!상속!!!!!!!!!!!!!!!!!!!!!아!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!상속!!!!!!!!!!!!!!!!!!!!!아!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!상속!!!!!!!!!!!!!!!!!!!!!아!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!상속!!!!!!!!!!!!!!!!!!!!!아!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!상속!!!!!!!!!!!!!!!!!!!!!

---

클래스 상속

• extends 키워드 사용

class Animal {
  constructor(name) {
    this.speed = 0;
    this.name = name;
  }
  
  run(speed) {
    this.speed = speed;
    console.log(`${this.name} 속도 = ${this.speed}`);
  }
  
  stop() {
    this.speed();
    console.log(`${this.name} 멈춤`);
  }
  
}

class Rabbit extends Animal {
  hide() {
    console.log(`${this.name} 숨기`);
  }
}

let rabbit = new Rabbit("쀼");
rabbit.run(5);
rabbit.stop();
rabbit.hide();

// class ≒ 생성자 함수, 따라서 prototype의 constructor를 통해 자기 참조 가능
console.log( Animal.prototype.constructor ); // Animal 함수
console.log( Rabbit.prototype.constructor ); // Rabbit 함수

// **객체.__proto__ === 클래스.prototype 무조건 일치**
console.log( rabbit.__proto__ === Rabbit.prototype ); // true
console.log( animal.__proto__ === Animal.prototype ); // true

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

---

메소드 오버라이딩

• 메서드를 자체정의하면 상속받은 메서드가 아닌 자체 메서드 사용
• 부모 메서드 호출 want -> super 키워드

1. super 객체에 접근하여 부모 클래스에 정의된 메소드 호출 가능
2. super 메서드 호출하면 부모 생성자 호출
   (부모 생성자 호출은 자식 생성자 내부에서 허용)

class Animal {
  constructor(name) {
    this.speed = 0;
    this.name = name;
  }
  
  run(speed) {
    this.speed = speed;
    console.log(`${this.name} 속도 = ${this.speed}`);
  }
  
  stop() {
    this.speed();
    console.log(`${this.name} 멈춤`);
  }
  
}

class Rabbit extends Animal {
  hide() {
    console.log(`${this.name} 숨기`);
  }
  stop() {
    // super 객체 접근 -> 부모 클래스 stop 메서드 호출
    super.stop();
    // 고유 메서드 호출
    this.hide();
}

let rabbit = new Rabbit("쀼");
rabbit.run(5);
rabbit.stop();
rabbit.hide();

---

생성자 오버라이딩

• 클래스가 다른 클래스를 상속받고 생성자가 없을 경우 내용 없는 constructor 메서드 생성
  • constructor 내용
    super 키워드로 부모 생성자 메서드 호출
    부모 클래스의 생성자 메서드에 전달받은 인수 전달

---

class Rabbit extends Animal {
  // 상속받은 클래스 내부 생성자가 없을 경우 자동 생성
  constructor(...args) {
    // 전달받은 모든 인수를 부모 생성자 메서드로 전달
    super(...args);
  }
}

---

상속 클래스의 생성자에선 반드시 super 로 부모 생성자 호출

잘못된 예

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

class Rabbit extends Animal {
	constructor(name, earLength) {
// super를 이용한 부모 생성자 호출을 진행하지 않음 (에러 발생!)
		this.speed = 0;
		this.name = name;
		this.earLength = earLength;
	}
// ...
}

// ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
// 해석 => 참조에러: 반드시 상속받는 클래스에서 "this에 접근"하거나 "상속받는 클래스의 생성자 메서드가 종료되기 전"까지 super 키워드를 이용한 부모 생성자 호출을 진행해야 합니다.

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

올바른 예

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

class Rabbit extends Animal {
	constructor(name, earLength) {
		// 상속 받은 클래스에서는 반드시 super를 통해 부모 생성자 호출해야 함!
		super(name);
		this.earLength = earLength;
	}
}

// 문제 없이 객체 생성 가능
let rabbit = new Rabbit("흰 토끼", 10);