[Javascript] 프로토타입 (Prototype)

자바스크립트는 프로토타입 기반 언어이자 객체지향언어의 일종입니다. 쉽게 이야기해서 프로토타입이 자바스크립트의 모든 객체들의 부모가 될 수 있습니다. 자바, 파이썬과 같은 객체지향의 언어와 같은경우 클래스라는 것이 존재합니다. 자바스크립트기 객체지향언어지만, 클래스라는 개념이 없이 프로토타입이라는 것을 사용합니다. 그러다 보니 상속기능이 따로 없이 객체를 원형으로 하여 복제의 과정을 통해서 객체의 동작 방식을 다시 사용할 수 있습니다.

 

 

 

prototype 객체

Javascript의 모든 객체는 자신의 prototype으로 부터 constructor 프로퍼티를 상속합니다. 인스턴스가 생성되는 순간 prototype의 constructor 생성자 메서드를 호출합니다. 모든 Javascript 함수는 Function prototype 객체를 참조하기 때문에 Function prototype 객체의 constructor을 호출하여 생성합니다.

 

 

 

사용하는 방법

함수(fnuction)이나 new를 활용해서 인스턴스 생성과 비슷하게 흉내낼 수 있습니다.

 

1) 자바스크립트 객체생성 (메모리 낭비)

- 다음과 같은 경우 ham와 di는 animal과 travel 객체를 공통적으로 가지고 있지만, 메모리에는 각 객체가 2개씩해서 총 4개가 할당이 됩니다. 이러한 경우. 객체를 500개 만들게 되면 1000개의 변수가 메모리에 할당이 될 수 있겠죠.

 

 

 

2) 1번과 같은 메모리 낭비 문제를 프로토타입으로 해결합니다.

- 캡쳐화면과 같이 InterestingFunc라는 빈 Object가 어딘가에 존재하고, Interesting 함수로부터 생성된 객체(ham, di)들은 어딘가에 존재하는 Object에 들어있는 값을 모두 갖다 쓸 수 있습니다. 화면과 같이 animal과 travel을 객체 안이 아닌 빈공간에 넣고서 사용을 하는거로 볼 수 있습니다.

 

 

 

Prototype Link와 Prototype Object

 자바스크립트에는 Prototype Link와 Prototype Object라는 것이 존재합니다. 이 둘을 통틀어서 Prototype이라고 부릅니다.

 

객체는 언제나 다음과 같이 함수(Function)로 생성됩니다.

function hamdiFunc {} //함수

var hamdiObj = new hamdiFunc();  // => 함수로 객체를 생성합니다