Class - extends, super

Class

: Class는 개별 Object를 instace하기 위한 하나의 틀(고정 형식)
: 공통된 속성과 method의 효율적인 재사용을 위한 묶음

extends

:클래스 간 상속을 통해, 보다 간소하고 효율적으로 코드를 작성하기 위한 개념

<예시 코드>

class Square extends Polygon {
  constructor(length) {
    // 여기서, length와 함께 부모 클래스의 생성자를 호출
    // Polygon의 너비 및 높이가 제공됨
    super(length, length);
    // 주의: 파생 클래스에서, super()가 먼저 호출되어야 'this'를
    // 사용할 수 있습니다. 이를 빼먹으면 참조 오류가 발생합니다.
    this.name = 'Square';
  }

  get area() {
    return this.height * this.width;
  }

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

super

: expends 통해 상위 클래스를 상속하는 경우에는 기본적으로 동일한 method나 속성해 대하여, overiding이 발생하여, 하위 클래스에서 정의한 method나 속성을 우선 실행하게 되는데, 이러한 경우라도, 선택적으로 상위 클래스의 method나 속성을 사용하기 위하여 super를 사용
- super.method(...)는 부모 클래스에 정의된 메서드, method를 호출합니다.
- super(...)는 부모 생성자를 호출하는데, 자식 생성자 내부에서만 사용 할 수 있습니다.

<예시 코드>

class Polygon {
  constructor(height, width) {
    this.name = 'Polygon';
    this.height = height;
    this.width = width;
  }
  sayName() {
    console.log('Hi, I am a ', this.name + '.');
  }
}

class Square extends Polygon {
  constructor(length) {
    this.height; // 참조오류가 발생합니다. super가 먼저 호출되어야 합니다.

    // 여기서, 부모클래스의 생성자함수를 호출하여 높이값을 넘겨줍니다.
    // Polygon의 길이와 높이를 넘겨줍니다.
    super(length, length);

    // 참고: 파생 클래스에서 super() 함수가 먼저 호출되어야
    // 'this' 키워드를 사용할 수 있습니다. 그렇지 않을 경우 참조오류가 발생합니다.
    this.name = 'Square';
  }

  get area() {
    return this.height * this.width;
  }

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

참고 링크- javascript.info

참고 링크- Udemy 강의 中