[Object](https://velog.io/@jjung-developer/TIL-08-Object 에서 메서드를 포함한 생성자로 인스턴스를 여러개 생성하면 같은 작업를 하는 메서드를 인스턴스 개수만큼 생성하게 되며, 결과적으로 그만큼의 메모리를 소비하게 된다고 설명했다.
이러한 문제점을 해결할 수 있는 방법이 prototype이라고도 이야기를 했었다.
오늘은 prototype에 대해 알아보자!

prototype

자바스크립트는 프로토타입 상속에 기반을 둔 객체 지향 언어이다.
여기서 상속이란 일반적으로 특정 객체가 다른 객체로부터 기능을 이어받는 것을 말한다.
이러한 상속을 하는 이유는 이미 정의된 프로퍼티와 메서드의 코드를 재사용할 수 있고 새로운 기능을 추가해 확장된 객체를 만들 수도 있다.

function Ultra() {}
Ultra.prototype.ultraProp = true;

function Super() {}
Super.prototype = new Ultra();

function Sub() {}
Sub.prototype = new Super();

var o = new Sub();
console.log(o.ultraProp); // true

sub는 super를 상속받고 super는 ultra를 상속받는다
ultra안에 ultraProp이 true로 정의되어 있으니 o.ultraProp도 true가 나온다.

💁🏻‍♀️ 그럼 여기서 prototype 뭐죠?

모든 객체는 내부프로퍼티를 [[prototype]]를 가지고 있다.
sub의 프로퍼티 중 prototype이라는 특수한 프로퍼티가 있어 그 프로퍼티 안에 객체가 정의되어 있는것이다!

이렇게 꼬리를 물고 올라가는 방식을 prototype chain이라고 한다

❌ Sub.prototype = Super.protoype 이라고 쓰면 안돼나..?

라고 궁금증을 가질 수 있다!
만약 위의 코드처럼 쓰게 된다면 자식에게 일어나는 일이 부모에게도 반영되기 때문에 코드가 엉키는 일이 생길 수 있다!

prototype vs --proto--

function Person (name,first,second){
  this.name = name;
  this.first = first;
  this.second = second;
}

Person함수가 만들어진 순간 Person이라고 하는 새로운 객체가 생성되고 그 Person의 prototype의 객체가 하나 더 생긴다

Person안에는 내부적으로 prototype이라는 프로퍼티가 생기고 그 프로퍼티는 prototype객체를 가르키게 된다.
Person의 프로토타입 객체도 자신이 Person의 소속인 것을 표시하기 위해 constructor이라는 프로퍼티를 만들고 그 프로퍼티는 Person을 가르키게된다. 서로간의 상호 참조를 하는 형태이다.

Person.prototype.sum = function(){};

var kim = new Person("kim",10,20);

person의 prototype이 kim의 --proto--가 되는 것이다.
person's prototype를 person.prototype을 통해서 접근 할 수 도 있고 kim.prototype을 통해서도 접근 할 수 있다.

console.log(kim.name);

해당 코드를 읽고 자바스크립트 엔진은 kim.name이라는 프로퍼티가 있는지 확인한다.
만약에 있다면 값을 출력하고, 없다면 --proto--가 가리키는 객체에 name이 있는지 찾아본다.

kim.sum();

kim이라는 객체에는 sum이라는 메소드가 없다.
--proto--가 가르키는 객체에 가서 sum을 찾는다!

<참고>
생활코딩
https://www.youtube.com/watch?v=yXnbvyl04V4
https://www.youtube.com/watch?v=673mZ8rE9UY
https://www.youtube.com/watch?v=wT1Bl5uV27Y