[JavaScript] 프로토타입(prototype)

 

자바스크립트에는 객체지향 언어에서 빠질 수 없는 Class 개념이 없다.

대신 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍을 지원한다.

클래스가 없으니 상속 기능도 없기 때문에 보통 프로토타입 기반으로 상속 흉내 내어 구현하여 사용한다.

es6에서 class문법이 추가되었지만 자바스크립트가 클래스 기반으로 바뀐 것은 아니다.

 

 

< 함수의 구조 >

function Person(){}

 

함수를 정의하면 위 그림과 같이 생성 된 함수와 함수의 prototype Object가 생성된다.

Person 함수는 prototype 속성을 통해 자신의 프로토타입 객체를 참조하고,

프로토타입 객체는 constructor 속성을 이용하여 자신을 생성한 함수인 Person 함수를 참조하는 구조를 가진다.

프로토타입 객체는일반적인 객체와 같고, 기본적인 속성으로 constructor 와 __proto__를 가진다.

 

 

< 프로토타입 객체란 >

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 객체의 내부 구조

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); //2

Person 함수 자체에 변수를 선언하지 않고 Person 함수의 프로토타입에 eyes와 nose 변수를 정의하면,

kim과 park은 Person.prototype을 참조하여 해당 변수들을 공유해서 사용할 수 있다.

두 객체는 Person 함수를 통해 생성되었기 때문이다.

kim이 가지고 있는 __proto__ 속성을 이용하여 prototype Object를 참조한다.

__proto__ 속성은 모든 객체가 가지고 있는 속성이다.

__proto__ 는 객체가 생성될 때 사용된 함수의 prototype Object를 가리킨다.

prototype Object에 변수들이 생성되었다.

kim의 __proto__속성이 prototype Object를 가리킨다.

 

 

 

 

< 프로토타입 체인 >

kim 객체가 eyes를 직접 가지고 있지 않기 때문에 eyes 속성을 찾을 때까지 상위 프로토타입을 탐색한다.

최상위인 Object의 prototype Object까지 도달했는데도 못 찾았을 경우 undefined를 리턴한다.

__proto__ 속성을 통해 상위 프로토타입과 연결되어 있는 형태를 프로토타입 체인이라고 한다.

 

이런 프로토타입 체인 구조 때문에 모든 객체는 Object의 자식이라고 불린다.

또한 Object prototype Object에 있는 toString 과 같은 모든 속성을 사용할 수 있다.

 

 

 

 

 

[참고]

https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67

http://www.nextree.co.kr/p7323/