자바스크립트는 프로토타입 기반 언어라고 불린다. 자바스크립트 개발을 하면 빠질 수 없는 것이 프로토타입이다. 자바스크립트는 객체지향언어이다. 근데 자바스크립트는 클래스 개념이 없다. 대신 프로토타입이라는 것이 존재한다. 이것이 자바스크립트가 프로토타입 기반 언어라고 불리는 이유다. 보통 프로토타입을 기반으로 상속을 흉내내도록 구현해 사용한다.(이렇게 해서 객체지향언어인 자바의 흉내를 내는 것이다;;)

<aside> 💡 어디다가 쓰나요?

</aside>

넌 이미 알고 있다. 자바스크립트에 클래스는 없지만 함수(function)과 new를 통해 클래스를 비스무리하게 흉내 낼 수 있다.

<aside> 💡 프로토 타입이 없을 경우

</aside>

function Person() {
  this.eyes = 2;
  this.nose = 1;
}
var kim  = new Person();
var park = new Person();
console.log(kim.eyes);  // => 2
console.log(kim.nose);  // => 1
console.log(park.eyes); // => 2
console.log(park.nose); // => 1

kim과 park은 eyes와 nose를 공통적으로 가지고 있는데, 메모리에는 eyes와 nose가 두 개씩 총 4개 할당된다. 객체를100개 만들면 200개의 변수가 메모리에 할당되겠죠?바로 이런 문제를 프로토타입으로 해결할 수 있다.

function person(){}

person.prototype.eyes = 2;
person.prototype.nose = 1;

var kim = new Person();
var park = new Person();

console.log(kim.eyes);

person.prototype 이라는 빈 Object가 어딘가에 존재하고, person함수로부터 생성된 객체 kim,park 들은 어딘가에 존재하는 Object에 들어있는 값을 모두 가져다 쓸 수 있다. 즉,eyes와 nose를 어딘가에 있는 빈 공간에 넣어놓고 kim과 park이 공유해서 사용하는 것이다. 프로토타입이 왜 이렇게 쓰이는지 조금 더 깊게 알아보도록 하겠습니다.

<aside> 💡 Prototype Link + Prototype Object = Prototype

</aside>

자바스크립트에는 Prototype Link 와 Prototype Object라는 것이 존재한다. 그리고 이 둘을 통틀어 Prototype이라고 부른다. 프로토타입을 좀 안다는 것은 이 둘을 완벽히 이해하고 갖고 놀 수준이 되었다는 뜻입니다.

제가 프로토타입에 대해 공부하면서 중요하다고 생각되는 포인트가 몇 가지 있었습니다. 그 포인트들을 잘 이해하면서 보시기 바랍니다.

Prototype Object

객체는 언제나 함수로 생성된다.

function Person() {}
var personObject = new Person(); //함수로 객체 생성

이렇듯 언제나 객체는 함수에서 시작된다.

var obj = {};
var obj = new Object();