요약

1. class 문법에도 prototype이 몰래 생성된다.
   
   
2. class의 prototype 공간안에 함수 써주는 것이 편하다.
   
   ▶ class도 '함수'이다.
   함수에 함수 등록이 가능하지 않다.
   따라서 class.prototype.함수=function(){...} 이건 가능하잖슴
   
   
3. class자체의 method는 static Key Word를 사용하자
4. 결국 constructor 와 비슷하며, 확장하는 것일뿐

class Parent {
  constructor(str,number){// 파라미터로 유동적인 값을 가지기
    this.name = str;
    this.age = number
    this.sayHi = function(){...}
    // constructor에 추가하여 자식이 직접 함수를 가지게 하던지
  }
    //prototype방식의 함수 추가
    sayHi(){...}// 부모.prototype에 함수 추가방식
    
    /* class의 메소드로 사용하고 싶으면 ...
    prototype의 함수 앞 static keyword*/
    static sayHello(){...}
}

//static은 prototype에서 쓰거라..            
Parent.sayHi();// 함수아니라고 실행 안됨
Parent.sayHello();// class의 메소드로 실행가능

// Object 복제 방법            
const child = new Parent('choi',30);// {name : 'choi',age:30}

// Q. class에 함수 또 추가 하고 싶으면?
 Parent.func2 = function(){...} // Parent도 결국 함수인데 .. 안되잖슴
 //A. prototype으로 해주자
 Parent.prototype.func2 = function(){...}
 
 // 부모 유전자 출력해주셈
 console.log(child.__proto__)//{constructor: ƒ, sayHi: ƒ}
                                     
 // Parent의 유전자 궁금하면                                 
 console.log(Parent.prototype) //{constructor: ƒ, sayHello: ƒ}    
 // Object.getPrototypeOf() = 부모님 prototype을 출력해주쇼   
 console.log(Object.getPrototypeOf(child));
            
     

Object.getPrototypeOf()

이 메소드 안에 상속받은 오브젝트를 넣어주면 부모의 prototpye을 출력해준다.
.__proto__와 비슷한 역할을 한다.

class Parent {
  constructor(){
    this.name = 'kim';
    this.age = 20;
  }
  sayHi() {
    console.log("hi");
  }
}

const child = new Parent();

console.log(Object.getPrototypeOf(child)); // {constructor: ƒ, sayHi: ƒ}
console.log(child.__proto__); // {constructor: ƒ, sayHi: ƒ}

//  위 두개의 출력이 동일하다.
console.log(child.__proto__ === Object.getPrototypeOf(child)); // true

Class

ES6 문법이 도래하면서, constructor보다 더욱 언어스럽고 새련된 상속문법이 들어섰다.


바로 Class라는 문법

기본 작성

class 작명 {//class keyword쓰고
  
  constructor(){//평소처럼 constructor 하듯 작성
    this.name = 'kim';
    this.age = 20;
  }
}

const obj = new 작명(); // {name :'kim', age : 20}

기본은 별거 없다..

함수 등록 경우 2가지

1. constructor 내부에 선언하여- 자식이 직접 함수를 가지는 방법
2. constructor 외부에 선언하여 prototype에 추가하는 방법

class Parent {
  constructor() {
    // constructor 내부
    this.sayHi = function(){...}
  }
    // constructor 외부 = Parent class의 prototype공간
    this.sayHi(){...}
}

Q. 왜 두가지가 있지?

내 생각엔... 🤣
constructor문법으로는 따로 prototpye을 작성하여 메소드를 정의 해야 하지만, class문법이 나오면서 constructor 내부와 외부를 한번에 감싸는 객체 형태로 함수를 정의 해 줌으로서, 한눈에 파악이 가능하고 가독성 좋게 하기 위함이 아닐까?

class에 갑자기 함수등록을 해주고 싶다면??

class Parent {
  constructor() {
    this.sayHi = function(){...}
  }
    this.sayHi(){...}
}
    
const child = new Parent();

/* 
아래의 작성방식은 옳지 않다
Parent 내부의 constructor도 결국 함수이기에 
객체에 Key, value 값으로 등록하는 것은 말이 안됨
*/    
Parent.anotherFunc = function(){...}

// 그렇다면??
Parent.prototype.anotherFunc = function(){...}
// Parent라는 'class'도 결국 constructor와 같기에 prototype이 있으니 거기에 등록 해주자

constructor안에 파라미터 추가하기

ES6 방식으로 constructor만들 때 파라미터 추가하려면 아래 처럼 하자

class Parent {
  constructor(str,number) {
    this.name = str;
    this.age = number
  }
}

const child = new Parent('choi',30);// {name :'choi', age : 30}

static - keyWord

class 자체에서 사용할 수 있는 메소드가 없으면 섭섭하지 않겠슴??
그렇다면 prototype 공간에 static key word 적고 함수 써주면 사용 가능

class Parent {
  constructor(str,number) {
    this.name = str;
    this.age = number
    // 여기선 사용 못함 오직 prototype에서 쓰자
    static this.sayHi=function(){console.log('hi')}
  }
  //prototype공간에 static keyword 쓰고 함수 써주자
  static sayhello(){console.log('hello')}
}

Parent.sayhello()// 'hello'