👼 class

ES6부터 도입된 class는 constructor, prototype 을 이용한 상속기능을 간지나게 만들 수 있게 도와주는 문법입니다.

💙 상속가능한 함수를 추가하려면

1. 함수를 this.sayHi 이렇게 constructor 안에 추가하는 방법
   👉 새로생성되는 자식은 sayHi() 함수를 직접 가지게 되며 자유롭게 쓸 수 있습니다.

2. class에 바로 추가 - > 부모 class에 prototype에 추가
   👉 자식은 sayHi()라고 썼을 때 부모의 prototype에 있던 sayHi() 함수를 쓸 수 있습니다.
   혹은 부모.prototype.sayHi = function(){}

class 부모 {
  constructor(){ 👈1
    this.name = 'Kim';
    this.sayHi = function(){ console.log('hello') }
  }
  
  sayHi(){ 👈2
    console.log('hello') 
  }
  
}

var 자식 = new 부모();

💙 Object.getPrototypeOf()

참고로 이 함수 안에 오브젝트를 넣으시면 부모 prototype을 출력해줍니다.
이 오브젝트가 대체 누구로부터 prototype을 상속받고 있는지를 알려주는 함수죠.

__proto__와 똑같습니다.

class 부모 {
  constructor(){ 
    this.name = 'Kim';
  }
  
  sayHi(){ 
    console.log('hello') 
  }
  
}

var 자식 = new 부모();

Object.getPrototypeOf(자식) // == 자식.__proto__

🌃 extends / super - class 복사

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

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

const 아버지1 = new 아버지('크롱')

super()라는 함수는
"extends로 상속중인 부모 class의 constructor()"를 의미합니다. (암기)
쉽게 말하면 할아버지 class의 constructor() 이거랑 똑같다는 소리입니다. (암기해야됨)
물려받는 class의 constructor
그래야 이제 에러없이 this.나이 이런걸 추가하실 수 있습니다. (암기 ㄱ)

메소드도 상속 됩니다.

class 할아버지{
  constructor(name){
    this.성 = 'Kim';
    this.이름 = name;
  }
  sayHi () {
    console.log('안녕');   // 할아버지.prototype에 추가됨.
  }
}

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

const 아버지1 = new 아버지('크롱')
아버지1.sayHi() //가능

아버지1 라는 오브젝트가 아버지1.sayHi() 이렇게 사용한다면

1. 아버지1라는 오브젝트에 sayHi가 있는지 물어보고
2. 없으면 아버지.prototype에 sayHi가 있는지 물어보고
3. 없으면 할아버지.prototype에 sayHi가 있는지 물어보고
   이런 식으로 sayHi를 실행하기 위해 부모님을 뒤져봅니다.

근데 sayHi()라는건 할아버지.prototype에 추가된 함수이기 때문에
아버지1 라는 오브젝트는 sayHi() 함수를 실행할 수 있습니다.

super의 또다른 용도

메소드에서는 부모.prototype 과 같은말이다.

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

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

var 크롱아버지 = new 아버지('크롱');

크롱아버지.sayHi2() 
//안녕 나는 아버지
//안녕 나는 할아버지
두번 console.log가 출력되는걸 확인할 수 있다.