클래스 상속(extends, super)

클래스 상속을 사용하면 클래스를 다른 클래스로 확장할 수 있다.

extends 키워드

extends 키워드는 부모 클래스(base class)를 상속받는 자식 클래스(sub class)를 정의할 때 사용한다. 

ex) class <자식클래스> extends <부모클래스>

형태로 사용한다.

class Computer {
  
  constructor (monitor, speaker, internet, keyboard) { 
    // Computer에 속성부여
    this.monitor = monitor;
    this.speaker = speaker;
    this.internet = internet;
    this.keyboard = keyboard;
  }
  // 메서드 추가 생성
  Shouting() {
    console.log(`Im using ${this.monitor} monitor!`)
  }  
}

const Mycom = new Computer('LG', 'Edifier', 'SKB', 'Logitec');

class Laptop extends Computer {
	
}

// 사실 여기까지만 해도 Computer 안에있는 모든 메서드들이 Laptop에 확장되었다.

let macbook = new Laptop;
console.log(macbook); // Laptop {...}
console.log(macbook.__proto__) // Computer {}

Super

super 키워드는 부모 class를 참조(Reference)할 때 또는 부모 class의 constructor를 호출할 때 사용한다

extends 가 오면 super 는 거의 그냥 따라가는거라고 보면 된다.

오버라이딩

상위 클래스가 가지고 있는 메소드를 하위 클래스가 재정의하여 사용하는 방식

 

class Computer {
  
  constructor (monitor, speaker, internet, keyboard) { 
    // Computer에 속성부여
    this.monitor = monitor;
    this.speaker = speaker;
    this.internet = internet;
    this.keyboard = keyboard;
  }
  // 메서드 추가 생성
  Shouting() {
    console.log(`Im using ${this.monitor} monitor!`)
  }  
}

const Mycom = new Computer('LG', 'Edifier', 'SKB', 'Logitec');

class Laptop extends Computer {
  constructor (monitor, speaker) {
    super(monitor, speaker) // super는 부모 class를 참조하거나 
  						    // 부모 class의 constructor를 호출할 때 사용 
    this.wifi = true; // Laptop class만 가지고 있는 wifi 속성 부여
  }
	
}

let macbook = new Laptop;
console.log(macbook.wifi); // true // Laptop내 존재
console.log(macbook.monitor) // LG // Computer를 참조

 

 

참조

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/super

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

https://poiemaweb.com/es6-class