[Javascript] Object Prototype 프로토타입 이해하기

자바 스크립트의 프로토타입 상속 이라는 확장과 객체의 재사용을 가능하게 해주며 class 기반으로 인스턴스를 생성하지 않는 자바스크립트에서 객체지향적인 개발배념을 가질수 있게 해주는  Prototype 에 대한 내용이다.

하지만 일반적인 자바스크립트에 대한 정공파가 아니면 제대로 이해하고 있지 않거나 이해 하기 힘든 부분이기도 하다. 

 

그이유는 Prototype object 와 Prototype Link 를 제대로 구분해서 인지하고 있지 못하고 있기 때문이다.

 

* Prototype 기반 프로그래밍 이해하기

 

프로토 타입 기반 프로그래밍 이란

객체의 원형인 프로토 타입을 이용하여 새로운 객체를 만들어 내는 프로그래밍 기법이다.  이렇게 만들어진 객체 역시 자기자신의 프로토타입을 갖는다.

이 새로운 객체의 원형을 이용하면 또 다른 새로운 객체를 만들어 낼 수도 있으며 이런 구조로 객체를 확장하는 방식을 프로토타입 기반 프로그래밍이라고 한다.

이 프로토타입 기반 프로그래밍은 Class 기반 OOP 언어를 다루던 사람에게는 이해가 잘 안가는 부분 일수도 있다. Class 기반의 언어에서는 Class 안에 기술된 내용을 기반으로 인스턴스를 생서하여 객체를 사용한다.

하지만 자바스크립트는 Class가 존재하지 않는다. 그래서 자바스크립트에서는 객체의 원형인 프로토타입을 이용한 클로닝(Cloning : 복사)과 객체 특성을 확장해 나가는 방식을 통해 새로운 객체를 생성해 낸다.

자바스크립트 응용에서 다룰 프로그래밍 패턴과 연관된 재밌는 사실중 하나는 자바스크립트의 프로토타입 객체의 확장은 옵저버 해턴을 따른다. 

 

* 자바스크립트에서 사용되는 프로토타입

var foo = {name : "foo"}; // foo 라는 객체를 생성.
foo.prototype.a='hello world';
console.log(foo.a);

위 결과는 Syntax error이다. 그이유는 자바스크립트에서 말하는 프로토타입이란 말에 원천적인 의미와 실제 자바스크립트를 사용하면서 눈으로 보틑 프로토타입이란 녀석과의 차이를 이해하여야 한다.

자바스크립트에서 사용되는 프로토타입이랑 용어는 크게 두가지로 나눈다. Prototype Property가 가리키고 있는 Prototype Object와 자기 자신을 만들어낸 객체의 원혁을 의미하는 Prototype Link이다.

자바스크립트 관련 레퍼런스는 대부분 프로토타입에 대한 정의는 객체의 원형을 의미하는 prototype Link로 정의하지만 prototype property를 이용한 객체 확장에 대해서만 다루기 때문에 이 둘의 차이를 자세히 거론하지 않는다.

그런이유로 자바스크립트의 프로토타입을 공부하는 사람들의 prorotype property가 자바스크립트에서 말하는 프로토타입이라고 이해하고 이를 사용한다. 

하지만 이둘은 엄연히 틀린 의미이기 때문에 제대로 이해하고 있어야 한다.

 

* 자바스크립트의 프로토타입이란

 

- 자바스크립트의 모든 객체는 자심의 생성한 객체 원형에 대한 숨겨진 연결을 갖는다. 이때 자기 자신을 생성하기 위해 사용된 객체원형을 프로토타입이라 한다. 자바스크립트의 모든 객체는 object 객체의 프로토타입을 기반으로 확장 되었기 때문이 이 연결의 끝은 Object 객체의 프로토타입 Object 이다.

자명한 사실이다. 프로토타입이란 의미자체가 원형, 원본이란 말이다. 자바스크립트에서 말하는 프로토타입 역시 문법적인 의미에서 벗어나지 않는다. 즉, 어떠한 객체가 만들어 지기위해 그 객체의 모태가 되는 녀석을 프로토타입이라고 한다. Java나 php에서 말하는 class가 바로 자바스크립의 프로토타입과 동일한 의미일것이다.

function A() {};
var A = new A();
console.log(A);

위 예제는 new Operator를 사용하여 A라는 객체 생성자를 이용한 새로운 객체를 생성하여 A라는 변수에 담는 코드이다. 그렇게 만들어진 객체의 로그를 찍어보면 아래와 같은 내용을 확인할수 있다.

위 내용에서 주의깊게 봐야할 것이 있는데 바로 __proto__와 constructor이다. __proto__ 바로 이 녀석이 A라는 객체를 만들어 내기 위해 사용된 객체원형에 대한 숨겨진 연결이다.

 

해당 객체의 프로토타입은 A라는 함수객체이며 이 객체의 생성자 역시 function A() 함수 라는것이다. 즉, new Operator를 통해 만들어진 객체는 fuction A() 를 자신의 프로토타입으로 사용하여 만들어 졌다는 것이다.

 

흔히 우리가 알고있는 프로토타입은 자신을 만들어낸 객체원형을 의미하는것이 아니다. 대부분의 자바스크립트 기초가 부족한 사람들이 말하는 프로토타입은 애석하게도 prototype property이다.