🥫 프로토타입과 Class in JS 🥫

🥑 prototype 이란?

 

ES6문법 이전에는 Java Script에는 class가 없었다고 합니다. 그래서 prototype을 통해서 이를 흉내내려고 했습니다. prototype없이 함수와 new만 사용하게 된다면 아래와 같이 됩니다.

function 탕수육() {
  this.meat = pork;
  this.sauce = sour;
}

let '김피탕' = new 탕수육();
let '오래된탕수육' = new 탕수육();

이렇게 김피탕과 오래된탕수육을 만든다면 메모리에 meat과 sauce가 각 2개씩 4개를 사용하게 됩니다. 하지만 prototype을 통해서 빈 공간에 넣고 싶은 데이터들을 다 담아두고 탕수육끼리 그 공간을 공유해서 사용하게 만들면 어떨까요?

function 탕수육() {
  탕수육.prototype.meat = pork;
  탕수육.prototype.sauce = sour;
}

let '김피탕' = new 탕수육();
let '오래된탕수육' = new 탕수육();
let '소고기탕수육' = new 탕수육();
let '꿔바로우' = new 탕수육();

//몇 개가 오든 탕수육의 meat과 sauce의 메모리 차지는 같다.

탕수육.prototype 이라는 빈 객체가 있어서 그 곳에다 값을 저장하기 때문에 생성자 함수로 탕수육을 여러개 만들어도 탕수육들의 meat과 sauce의 메모리 차지가 늘어나진 않습니다. 

__prototype__ 은 타겟의 상위 프로토 타입의 주소값을 조회할 때 사용

object.create( x.prototype) = > 인자로 들어간 프로토타입을 바탕으로 새로운 프로토타입을 만든다! 
swallow copy 와 deep copy의 차이인 점 기억해줘!

자바스크립트가 OOP가 기본인 언어가 아니기 때문에 만약에 create으로 프로토타입을 카피했다면 반드시 
XXX.prototype.constructor = XX 으로 설정을 해줘야한다.  -> 이런걸 몽키패치라고 한다. 
또 새로 만든 객체를 위처럼 연결해도 원본에서의 this가 인식이 안되기 때문에 XX.call( this, argument) 를 해줘야한다. 

 

지금은 Class 가 있어서 괜찮다. constructor로 값 객체를 만들고 extends로 기존에 있는 class에 다른 것들을 추가할 수 있다. 또 super를 통해서 This를 선택해서 하고 싶은 기능을 구연할 수 있다.   class 에서 instance는 this라고 생각하면 됩니다. 

부모와 같은 constructor 아래 부분은 생략이 가능하다. 
다형성! 원본은 같지만 작동을 다르게 하는것!  

 Overloading 파라미터가 달라서 값이 다르게 나오는것( 이거는 자바스크립트에 없습니다.)  Overriding 메소드가 달라서 값이 다른 것!