상속을 사용하는 이유

비슷한 기능을 가지는 클래스를 활용하려고 할 때, 각각 분리하여 클래스를 만든다면 동일한 기능 및 속성들을 중복해서 작성해야 한다.

코드의 중복 작성을 피하여 생산효율을 높이기 위해 ‘상속’을 사용

상속 형태

class 클래스 이름 extends 부모클래스 이름 {

}

예시

// 사각형 클래스
class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  // 사각형의 둘레를 구하는 메소드
  getPerimeter() {
    return 2 * (this.width + this.height);
  }

  // 사각형의 넓이를 구하는 메소드
  getArea() {
    return this.width * this.height;
  }
}

// 정사각형 클래스
class Square extends Rectangle {
  // squard 클래스가 자식 클래스
  constructor(length) {
    super(length, length); // 부모(Rectangle)의 생성자 함수를 호출하는 코드 : super
  }
  //  getPerimeter() 와 getArea() 메소드를 제거
}

// 클래스 사용하기

const square = new Square(10, 20);
console.log(`정사각형의 둘레: ${square.getPerimeter()}`);
console.log(`정사각형의 넓이: ${square.getArea()}`);

// 출력결과
정사각형의 둘레: 40
정사각형의 넓이: 100

Square 클래스에서 getPerimeter(), getArea() 메소드를 선언하지 않았지만 부모클래스인 Rectangle 클래스에서 상속받았으므로 사용할 수 있다.!!

의문점

조금 의아했던 부분이.. Square 클래스를 정의할 때는 생성자에 width, height 둘 다 정의하지 않고 length 하나만 전달하도록 했고, 부모의 생성자 함수를 호출하는 super 부분에서는 파라미터를 두 개를 넣는데.. 또 두 파라미터는 동일하게 length로 입력하고 있다.

그리고 Square 클래스를 사용해서 인스턴스를 만들 때 또 new Square(10, 20) 으로 만들고 있는데.. 저 두 번째 파라미터 20은 무슨 의미인지 좀 이해가 가지 않음..

혹시나 해서 파라미터에 하나의 인자만 넣어봤는데, 정상적으로 작동한다.