JS : Super와 extends를 이용한 클래스 상속

상속

OPP에서 상속은 부모클래스의 특성을 자식클래스가 물려받는 시스템을 말한다. 이를 통해 개발자는 두번 똑같은 내용을 입력할 수고를 덜 수 있다.

 

class Polygon {
  constructor(height, width) {
    this.name = 'Polygon';
    this.height = height;
    this.width = width;
  }
 
}

부모 클래스 Polygon을 선언하였다. constructor(생성자함수) 로 매개변수 height, width를 선언한다.

class Square extends Polygon { //extends를 이용해 Polygon을 상속받는다.
  constructor(length) { // 매개변수 length를 선언한다.
    
    super(length, length); // 부모 클래스 Polygon의 매개변수에 차례대로 할당된다.
    // 여기선 height, width 둘다 변수 length 이다.

    this.name = 'Square';
  }

  get area() {
    return this.height * this.width; // 여기서 this는 Polygon이다.
  }

  set area(value) {
    this.area = value;
  }
}

자식 클래스 Square를 선언하였다. constructor(생성자함수) 로 매개변수 length 를 선언한다.

주석에서 볼 수 있듯 super를 이용해 부모 클래스의 매개변수에 할당될 값을 자식 클래스에서 입력할 수 있다.

super는 this보다 먼저 호출되어야 한다.

let two = new Square(2)

console.log(two.area) // 4

two 라는 변수에 클래스 Square의 인스턴스를 할당한다.

new 선언자를 통해 인스턴스가 만들어지면 생성자 함수가 실행되어 인스턴스에 length를 할당한다.

Square는 부모 클래스 Pologon으로부터 상속받고 two.area에는 4가 할당된다.