class / extends / super

Class

---

class는 constructor, prototype 을 이용한 상속기능을 약간 더 보기쉽게 표현해주는 문법이다.
(기존 function부터 시작하던 문법과 기능상 차이는 크게 없다)

class 부모 {
    constructor() {
        this.name = 'Kim';
    }
}

var 자식 = new 부모();

상속가능한 함수를 추가하고 싶다.

class 부모 {
    constructor() {
        this.name = 'Kim';
      // 여기에 함수 추가하거나
    }
  // 여기에 함수 추가하기
}

var 자식 = new 부모();

constructor 안에 함수를 추가하면 var 자식을 했을때 같이 상속되지만
constructor 바깥에 함수를 추가하면 자식에게 상속은 안되고 부모.prototype에 남는다.

Object.getPrototypeOf()

---

이 함수 안에 오브젝트를 넣으면 부모의 prototype을 출력해준다.
이 오브젝트가 누구로부터 prototype을 상속받고 있는지를 알려주는 함수이다.
(__proto__라는 키워드와 비슷한 역할)

constructor안에 파라미터 추가하고 싶다.

class 부모 {
  constructor(이름, 나이){
    this.name = 이름;
    this.age = 나이;
  }
}

var 자식 = new 부모('Park', 30);

이런 식으로 constructor 안에 파라미터를 넣을 수 있다.

prototype에 함수를 여러개 추가하고 싶다.

class 부모 {
  constructor(이름, 나이){
    this.name = 이름;
    this.age = 나이;
  }
  sayHi(){
    console.log('안녕');
  }
  sayHello(){
    console.log('안녕하세요');
  }
}

var 자식 = new 부모('Park');

이런식으로 하면 자식은 sayHi , sayHello 함수를 사용할 수 있다.

class를 상속한 class를 만들고 싶을 때 쓰는 extends

---

class 할아버지{
  constructor(name){
    this.성 = 'Kim';
    this.이름 = name;
  }
}

위 class가 유용하여 유사한 class를 하나 더 만들고 싶으면 복사 붙여넣기를 하면된다.

그런데 그러면 class의 길이가 긴 경우 복사할 코드의 길이가 너무 길어지는 단점이 있는데
이때 사용하는 것이 extend 문법이다.

(다른 class를 상속해서 만들 수 있게 도와주는 문법이다.)

extend 문법 사용법

class 할아버지{
  constructor(name){
    this.성 = 'Kim';
    this.이름 = name;
  }
}

class 아버지 extends 할아버지{

}

이렇게하면 아버지라는 할아버지 class를 그대로 복사한 class가 만들어진다.

할아버지 class의 내용을 복사하는데 몇 가지를 아버지 class에 추가하고 싶으면

class 할아버지{
  constructor(name){
    this.성 = 'Kim';
    this.이름 = name;
  }
}

class 아버지 extends 할아버지{
  constructor(){
    this.나이 = 50;
  }
}

이렇게하면 아버지 class에는 할아버지 class의 내용 + 나이 라는 것까지 넣어진다.

하지만 이렇게 단순하게 추가하면 error가 발생하는데 이때 사용하는것이

super라는 문법이다.

super 함수 사용법

---

class 할아버지{
  constructor(name){
    this.성 = 'Kim';
    this.이름 = name;
  }
}

class 아버지 extends 할아버지{
  constructor(){
    super();
    this.나이 = 50;
  }
}

super() 함수 특징

---

• "extends로 상속중인 부모 class의 constructor()"를 의미한다.

• 할아버지 class의 constructor() 랑 똑같다는 의미

• super()함수를 사용해야 에러없이 extend한 class에 무엇인가를 추가하실 수 있다.

그런데 할아버지 class의 constructor()에는 name 파라미터를 입력할 수 있었다.

따라서 파라미터까지 명시해주어야 할아버지가 가진 모든 속성들을 정확히 상속받을 수 있다.

class 할아버지{
  constructor(name){
    this.성 = 'Kim';
    this.이름 = name;
  }
}

class 아버지 extends 할아버지{
  constructor(name){
    super(name);
    this.나이 = 50;
  }
}

할아버지 constructor()에 name이라는 파라미터가 있던걸 그대로 아버지 constructor()에도 적용했다.

이제 그럼 new 아버지(); 할 때 파라미터를 입력하면 this.이름 속성에 들어가게 된다.

method 추가 방법

---

class 할아버지{
  constructor(name){
    this.성 = 'Kim';
    this.이름 = name;
  }
  sayHi(){
    console.log('안녕 나는 할아버지')
  }
}

class 아버지 extends 할아버지{
  constructor(name){
    super(name);
    this.나이 = 50;
  }
}

var a = new 아버지('만수');

a라는 오브젝트가 a.sayHi() 이렇게 사용한다면

1. a라는 오브젝트에 sayHi가 있는지 물어보고

2. 없으면 아버지.prototype에 sayHi가 있는지 물어보고

3. 없으면 할아버지.prototype에 sayHi가 있는지 물어보고

4. 찾을때까지 반복

이런 식으로 sayHi를 실행하기 위해 상위 요소들을 검색한다.
그런데 sayHi()라는건 할아버지.prototype에 추가된 함수이기 때문에
a라는 오브젝트는 sayHi() 함수를 실행할 수 있다.

class간의 함수 상속

---

아버지라는 class에 함수를 만들고 싶은데 할아버지 class에 있던 sayHi()라는 함수를 그대로 아버지 class에 가져와서 활용하고 싶을때

class 할아버지{
  constructor(name){
    this.성 = 'Kim';
    this.이름 = name;
  }
  sayHi(){
    console.log('안녕 나는 할아버지')
  }
}

class 아버지 extends 할아버지{
  constructor(name){
    super(name);
    this.나이 = 50;
  }
  sayHi2(){
    console.log('안녕 나는 아버지');
    super.sayHi();
  }
}

var a = new 아버지('만수');

이렇게 작성하면 되고
여기서의 super는 부모 class의 prototype을 의미한다.

super 뜻

---

1. constructor 안에서 쓰면 부모 class의 constructor

2. prototype 함수 안에서 쓰면 부모 class의 prototype