Prototype

TypeScript를 배우면서 결국, 타입스크립트는 자바스크립트의 superset인데 그러려면 JavaScript 개념을 조금 더 정리 할 필요성을 느꼈다빈
Prototype은 JS의 상속 기능, 객체 지향 프로그래밍을 위한 것이다!!!

Prototype

TS는 아래와같이 JS의 superset입니다. JS에선 없었던, class, interface, generics, types 등을 이용해서 객체 지향 프로그래밍이 가능했습니다.

BUT, JS도 엄밀히 말하면 proto-based를 통해 객체 지향입니다. 

또한, ES6부터는 class를 이용해서 프로토를 기반이기 때문에 객체 지향 프로그래밍이 가능합니다.

Prototype은 상속을 위해 쓰이는 아이입니다!

우리가 Class를 이용해서 상속을 구현할 수 있는 것처럼 JS에선 Prototype을 이용해서 상속을 구현할 수 있습니다.

Prototype의 영어 뜻은, "추상화해서 그림을 그리다"란 느낌이다. 

---

So, How to 구현 Proto?

const x = {};
const y = {};
console.log(x);
console.log(y);
console.log(x.toString());
console.log(x.__proto__ === y.__proto__);

const array = [];
console.log(array);

위와 같이, 빈 객체나 배열이더라도 개발자 도구를 켜서 확인해보면 __Proto__ 안에 있는 함수들을 사용할 수 있다.

또한, array더라도 Object Proto를 기본으로 상속받고 있는 걸 확인할 수 있다.

function CoffeeMachine(beans) {
  this.beans = beans;
  // Instance member level
  /* this.makeCoffee = shots => {
    console.log('making... ☕️');
  }; */
}

// Prototype member level
CoffeeMachine.prototype.makeCoffee = shots => {
  console.log('making... ☕️');
};
const machine1 = new CoffeeMachine(10);
const machine2 = new CoffeeMachine(20);
console.log(machine1);
console.log(machine2);

function LatteMachine(milk) {
  this.milk = milk;
}
LatteMachine.prototype = Object.create(CoffeeMachine.prototype);

const latteMachine = new LatteMachine(123);
console.log(latteMachine);
latteMachine.makeCoffee();

• Instance member level에서는 console.log(machine1)을 하면 {bean:10}의 객체 && makeCoffee라는 함수 둘 다 바로 보인다
• BUT, prototype member level처럼 구현하면 makeCoffee가 바로 보이는게 아니라, __Proto__안에 들어가게 된다.
• 또한, LatteMachine.prototype=Object.create(CoffeeMachine.prototype)을 통해 CoffeeMachine의 proto를 LatteMachine도 상속 받을 수 있다.

---

따라서, Prototype-based Programming이란?

• JS가 객체 지향을 프로그래밍을 할 수 있는 하나의 방법 (a style of OOP)
• behavior reuse 행동의 재사용 → 상속(inheritance)
• by reusing existing objects
• that serve as prototype