프로토타입 기초

prototype

자바스크립트는 prototype 기반 언어이다.
이 prototype에 대해서 잘 이해하고 있어야 우리는 자바스크립트의 깊숙하고 우아한 부분을 활용할 수 있다.
먼저 class 기반과 뭐가 다른지 살펴보자.

Class기반 언어

class 기반의 언어에서는 Class에 필요한 정보를 넣어둔다.
그리고 new Class명() 로 생성된 객체들은 Class안의 정보를 보고 객체를 생성한다.

prototype 기반 언어

prototype 기반언어는 조금 다르고 복잡하다.
prototype이라는 별도의 공간에다가 새로 생성될 객체들이 공유할 정보를 넣어둔다.
new 함수명()으로 생성된 객체들은 Person함수의 prototype이라는 공간의 정보와 연결되어 있다.

왜 prototype에 정보를 공유할까

귀차니즘 때문이다.
객체지향 프로그래밍의 존재의 이유는 귀차니즘 해결이다.
뭐가 귀찮냐고 하면 반복적으로 코드를 치는게 귀찮은 것이다.
예를 들어 Person이라는 객체에 sayHello라는 함수가 필요하다면
함수를 만들때마다 sayHello라는 함수를 반복적으로 정의하는게 아니라 Person.prototype 이라는 공간에 sayHello를 정의해두고 새로 만들어진 객체(인스턴스)들은 이를 사용하는 것이다.

코드와 그림으로 살펴보자

function Person(name) {
  this.name = name;
}

var lee = new Person("Lee");

Person.prototype.sayHello = function() {
  console.log("Hi! my name is " + this.name);
};

lee.sayHello();

prototype과 [[Prototype]]

자 우리가 기억해야 할 두가지 명제가 있다.

1. 모든 객체는 부모의 원형을 가리키는 인터널 슬롯인 [[Prototype]] 을 가지고 있다. (Object.prototype제외)
2. 모든 함수는 자신의 공유정보를 담을 prototype을 가지고 있다.

시작부터 난감하다. [[]] 이런 모양이 나올때부터 보기 싫어진다. 하지만 걱정하지 말라 이 두가지 명제만 기억하면 prototype 끝판왕이 될 수 있다. 아래 그림을 살펴보자.

위의 그림을 살펴볼 때 두가지 명제만 기억하면 된다.

• 첫번째 명제 - 모든 객체는 인터널 슬롯인 [[Prototype]] 을 가지고 있다.
  • 위의 그림에서 노란색의 [[Prototype]] 살펴보면 Object.prototype을 제외한 모든 객체들이 이 슬롯을 가지고 있다. [[Prototype]] 이 친구는 부모의 프로토타입 객체를 가리키는데 자바스크립트에서는 직접 제어하지는 못하고 __proto__ 라는 접근 프로퍼티를 사용하여 부모의 객체에 다가갈 수 있다.
• 두번째 명제 - 모든 함수는 prototype을 가지고 있다.
  • Function Person을 보면 빨간색의 prototype 을 가지고 있다. Person 함수로 생성된 객체 lee 는 __proto__를 통해 부모의 프로토타입 객체인 Person.prototype에 접근 가능하다.

정리

prototype의 단어가 좀 사람 힘들게 하지만 쉽게 정보 공유라는 개념으로 생각하면 간단하다.
우리는 메모리에 정보를 저장하고 이를 공유한다.
인간도 마찬가지로 DNA라는 생물학적 메모리에 정보를 넣어두고 자식들과 이 정보를 공유한다.
자바스크립트는 prototype이라는 공간에 정보를 넣어두고 자식들과 이 정보를 공유하는 것이다.