Javascript Prototype에 관하여

자바스크립트는 프로토타입 기반 언어이다.

 

최근 ECMA6에 있는 class 문법은 문법이 추가되었다는 것이지, 자바스크립트가 클래스 기반 언어로 바뀌었다는 뜻이 아니다.

그저 프로토타입을 기반으로 흉내내도록 구현된것이다.

 

function Person() {
	this.eyes = 2;
    this.nose = 1;
}

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

위 코드를 생각해보자.

 

kim, park은 eyes, nose를 공통적으로 가지고 있다.

그리고 메모리에는 eyes, nose가 2개씩 할당될 것이다.

 

그럼 인스턴스를 100개 만든다면 200개의 변수가 메모리에 할당될 것이다.

 

function Person() {}
Person.prototype.eyes = 2;
Person.prototype.nose = 1;

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

위 코드를 생각해보자.

 

위 코드는 Person.prototype 이라는 어떤 빈 객체가 어딘가에 존재하고,

Person 함수로 부터 생성된 객체 kim, park은 그 빈 객체의 값을 모두 갖다 사용함으로써 공유하여 사용할 수 있다.

 

 

원리

 

javascript에는 Prototype Link와 Prototype Object가 존재한다. (통틀어서 Prototype)

 

- Prototype Object

// 객체는 언제나 function으로 생성된다.
function Person() {}
const personObject = new Person();

객체는 언제나 함수로 생성되고, Function, Array도 모두 함수로 정의되어 있다.

 

이게 왜 중요하냐?

 

함수가 정의될때 2가지 일이 동시에 이루어지기 때문이다.

 

1. 해당 함수에 생성자 자격 부여

: 생성자 자격이 부여되면 new를 통해 객체를 만들어 낼 수 있게 된다.

2. 해당 함수의 Prototype Object 생성 및 연결

: 함수를 정의하면 함수만 생성되는 것이 아니라 Prototype Object도 같이 생성이 된다.

=> prototype 이라는 속성을 통해서 Prototype Object에 접근할 수 있다.

Prototype Object라고 뭐 특별한게 아니라, 일반적인 객체와 같고, 기본적인 속성으로 생성자, __proto__ 를 가지고 있다.

 

__proto__ 는 뭐냐?

__porto__ 는 Prototype Link 이다.

 

function Person() {}
Person.prototype.eyes = 2;
Person.prototype.nose = 1;
const kim = new Person();

다시 위 코드를 보자.

 

console.log(kim.eyes);

위 결과값은 무엇일까?

 

2이다.

 

어떻게 kim이 .eyes으로 Prototype Object의 eyes 값을 참조할 수 있느냐?

 

바로 kim이 가지고 있는 prototype link. 즉, __proto__ 가 이것을 가능하게 해준다.

 

prototype 속성은 함수만 가지고 있으나, __proto__는 모든 객체가 빠짐없이 가지고 있는 속성이다.

__proto__는 객체가 생성될 때 조상이었던 함수의 Prototype Object를 가리킨다.

 

즉, kim이 생성될때 kim의 __proto__는 조상인 Person의 Prototype Object를 가리키는 것이다!