Javascript:prototype

Hanaotome wiki

Javascript의 prototype에 대한 설명이다.

개요

Javascript는 다른 Class-based 언어와는 다르게 Prototype-based 언어이며, 이는 다른 언어들과 다른 패러다임을 가져온다. 이는 Javascript를 다른 언어와는 다른 개념으로 구조를 구성해야 하며, 기존 Class-based 언어에 익숙한 개발자들에게 혼란을 가져온다. 이 문서는 이에 대해 설명할 예정이다.

Quick-Answer

다음과 같은 코드에서는 각각의 Instance에 대해 data field가 2개씩 생성된다.

 1 function Person() {
 2     this.first = "John";
 3     this.last = "Doe";
 4 }
 5 
 6 var man = new Person();
 7 var woman = new Person();
 8 console.log(man.first) // "John"
 9 console.log(woman.last) // "Doe"
10 //man => { first: "John", last: "Doe" , __proto__: Person }
11 //woman => { first: "John", last: "Doe" , __proto__: Person }

하지만 다음과 같이 function을 작성한다면 data field를 공유하며 중복 생성되지 않는다.

 1 function Person() {}
 2 
 3 Person.prototype.first = "John";
 4 Person.prototype.last = "Doe";
 5 
 6 var man = new Person();
 7 var woman = new Person();
 8 console.log(man.first) // "John"
 9 console.log(woman.last) // "Doe"
10 //man => { __proto__: Person }
11 //woman => { __proto__: Person }

Origin Instance에 접근하여 수정할 경우 그 Instance의 data field에 새로운 요소로 등록된다.

 1 function Person() {}
 2 
 3 Person.prototype.first = "John";
 4 Person.prototype.last = "Doe";
 5 
 6 var man = new Person();
 7 var woman = new Person();
 8 
 9 man.first = "Michael"
10 //man => { first: "Michael", __proto__: Person }
11 //woman => { __proto__: Person }

좀 더 자세한 Prototype

일반적으로 사용하기에 Quick-Answer 만으로 충분하지만, 문제를 해결하기 위해서 Prototype에 대해 좀 더 자세히 알아 볼 필요가 있다.

Prototype

Prototype은 해당 Instance나 function이 어떤 Object를 통해 만들어 졌는지를 정의하는 방법이다. OOP에서의 inherit, interface등을 이를 이용해 표현할 수 있으며, 프로토타입 기반의 언어에서 핵심적인 기능을 한다.

Prototype를 이용하면 중복되는 Instance나 공유해야 하는 Singleton data등을 정의하고 사용할 수 있으며, function을 좀 더 확장할 수 있게 된다. Prototype은 다음과 같이 크게 두 가지 분류로 나눌 수 있다: Prototype ObjectPrototype Link

Prototype Object

Picture 1: Make function F() and inspect with console.log(F);

Prototype Object는 constructor__proto__ (몇몇 인터프리터에서는 <prototype>으로 나타난다.) 로 이루어져 있는 하나의 Object이다.

Picture 1에서 확인할 수 있으며, prototype element가 그것이다. function F는 prototype이라는 element를 가지고 있고, 이는 constructor__proto__로 이루어져 있다. 이 object를 Prototype Object라고 부르며, 이 Prototype Object 안의 constructor가 있는 function만이 new keyword를 통해 새로운 Instance를 만들 수 있다. new keyword를 통해 새로운 Instance를 생성할 때, constructor에 등록 된 function을 가지고 생성하기 때문이다.

이 Prototype Object에 접근하여 element를 생성할 수 있는데, 접근자는 .prototype으로 접근할 수 있으며, 해당 function object에 직접 element를 생성하여 자식 object에 상속할 수 있다.

1 function Person() {
2     this.first = "John";
3     this.last = "Doe";
4 }
5 
6 console.log(Person.prototype); 
7 // { constructor: Person, __proto__: Object }

Prototype Link

Object가 가지고 있는 element 중 __proto__(혹은 <prototype>)는 Prototye Link이며, 이는 해당 Object가 생성될 때 사용한 부모 Object의 Prototype Object에 대한 Link이다. 이를 이용하여 부모 Object로 올라가며 element 를 찾는다.

 1 function Person() {
 2     this.first = "John";
 3     this.last = "Doe";
 4 }
 5 Person.prototype.first = "John";
 6 Person.prototype.last = "Doe";
 7 
 8 var man = new Person();
 9 
10 //man => { __proto__: Person } => { constructor: Person, first: "John", last: "Doe", __proto__: Object }

같이 보기