class 상속(extends, super)

상속

• 클래스 내부의 constructor 의 규칙을 다른 클래스에 상속 시키는 것을 이야기한다.
• 즉, 상속하는 클래스의 constructor 의 규칙을 상속받는 하위 클래스가 재사용하는 것을 이야기한다.
• 정확히는 베이스 클래스(Base Class)가 파생 클래스(Derived Class)로 상속시키는 것을 이야기한다.
  → 부모와 자식으로 이야기하기도 한다.

extends

• 상위 클래스와 하위 클래스를 연결하는 키워드
• class 상속받을 클래스 extends 상속시킬 클래스 로 사용한다.

super

• 하위 클래스에서 상위 클래스의 생성자 규칙을 그대로 사용하겠다고 선언하는 것.
• super(규칙을 그대로 사용할 상위 클래스 매개변수) 로 사용한다.
• extends 가 사용된 경우 반드시 super 가 사용되어야 한다.
• super 는 constructor 내부의 최상단에 위치하여야 한다.

과정

1. 상속받을 클래스에 extends 키워드로 상속시킬 클래스를 작성하여 두 클래스를 연결시킨다.
2. **Child 클래스의 constructor 에 super() 함수를 작성하여 Parent 클래스**의 constructor 내부의 매개변수에 자신이 받은 인자를 대입한다.
3. 이렇게 대입된 인수는 Parent 클래스의 규칙대로 객체화 되고, Child 클래스를 할당한 인스턴스에 전달된다.

class Parent {
  constructor(a, b){
    this.first = a
    this.second = b
  }
}

class Child extends Parent {
  constructor(a, b){
    super(a, b)	
    // Parent 의 규칙을 상속받아 사용하는 것
    // Parent 의 constructor 로 인자를 보내어 해당 규칙에 맞는 배열을 반환받는다.
  }
}	

• 위의 예시에 따르면 Child 에서 전달된 인수는 super() 를 통해 Parent 로 전달되어 Parent 의 constructor 에 따라 객체화가 되지만, Parent 의 인스턴스가 아닌 Child의 인스턴스로 전달된다.
  (규칙만 가져다가 쓰는거임)

constructor 추가

• 하위 클래스는 자신의 constructor 함수를 사용하여 상속받은 상위 클래스의 규칙과 함께 새로운 규칙을 함께 사용 할 수 있다.

class Parent {
  constructor(a, b) {
    this.first = a
    this.second = b
  }
}

class Child extends Parent {
  constructor(a, b, c) {
    super(a, b)  
    // 상위 클래스의 규칙을 상속받음
    this.third = c
    // 나의 규칙을 추가함
  }
}

const some = new Parent(111, 222)
// {first: 111, second: 222}

const that = new Child(1111, 2222, 3333)
// {first: 1111, second: 2222, third: 3333}

• 상속의 중요한 의미는 위처럼 기존의 규칙에 새로운 규칙을 추가 할 수 있다는 점이다.
• 그리고 위처럼 간단한 리터럴로 선언된 데이터들을 객체에 넣는 것 뿐만이 아니라, 더 복잡한 기능을 프로퍼티 혹은 메소드로 추가시켜 각각의 '기능'들을 공유한다는 것이 가장 중요하다.

---

+

super 더 알아보기

• 규칙을 참조하는 것이 아니라, 데이터만 받고자 한다면 일부러 super를 사용하지 않아도 된다.
  → extends 를 통해 데이터 자체는 계속 상속되고 있기 때문.

class Parent {
  constructor(){
    this.hello = 'Hello!'
  }
}

class Child extends Parent {
  constructor(){
    super()	
  }
}	

const inst = new Child()
console.log(inst.hello) // 'Hello!'

• 만약 상위 클래스와 하위 클래스의 매개변수가 하나로 동일한 경우, 객체의 값이 두개가 추가된다.
  → 동시에 적용된다.

class Parent {
  constructor(a){
    this.hello = a
  }
}

class Child extends Parent {
  constructor(a){
    super(a)	
    this.bye = a
  }
}

const inst = new Child('hello!')
console.log(inst) 
// {hello: 'hello!', bye: 'hello!'}