[JavaScript] Object Prototype 이란 무엇인가!!! prototype 에 대한 쉬운 풀이!

이번엔 프로토타입(prototype)에 대해 포스팅 해 보도록 한다.

얼마전까지 나는 프로토타입에 대해 50프로만 알고 있었다.

얼마전까지 나의 프로토타입에 대한 정의는 --> 생성자에 의한 객체 생성시 메모리낭비를 줄이기 위해 사용하는 메소드들의 집합이라고만 알고 있었다.

이렇게만 알고 있으면 고급 자바스크립트 개발자로 더이상 갈 수 없다. (코어단으로 넘어갈 수 없단 이야기.)

보통 대부분의 자바스크립트 입문 서적들을 살펴보면 나와같이 이해하고 설명되어 있고 넘어가더라... 후우...

자 이제 쉽고 간단하게 프로토타입에 대해 설명하고 prototype chain 에 대해 설명하겠다.

 

prototype은 두가지의 의미를 내포하고있다.

1. __proto__ : 상위에서 물려 받은 객체의 프로토타입에 대한 정보. (prototype link 라고도 함)

2. protytpe : 자신을 원형으로 만들어질 새로운 객체들의 속성을 담는 그릇.(대부분의 입문자들이 알고 있는 정의 prototype object)

 

코어스크립트로 가기위한 첫발은 __proto__ 를 이해하고 prototype chain 을 이해하는 것.

 

prototype chain : 객체의 생성 과정에서 모태가 되는 프로토타입과의 연결고리가 이어져 상속관계를 통하여 상위 프로토타입으로 연속해서 이어지는 관계를 프로토타입체인이라 한다. 이 연결은 __proto__를 따라 올라가게 된다.

 

 

 

 

쉽게 말해 이런 구조를 띄고 있게 된다. constructor는 prototype 의 주인객체를 가리킨다.

이때 B,C객체가 A객체에 의해 생성되어있다면 A.prototype에 선언되어 있는 x를 공유 할 수 있게 된다. 여기서는 상속받는다가 아닌 공유한다 이다.

 

A.prototype.x 를 선언하고 B객체와 C객체를 선언하여 B.x 혹은 C.x를 사용하면 A.prototype.x 가 호출되게 된다.

이런 방법으로 선언하면 A.prototype.x 를 수정하면 B.x , C.x 도 (B.x 와 C.x를 따로 선언하지 않는 이상)수정된 값을 가지게 된다. 즉 공유한다는 말이 된다.

 

하지만 A.prototype.x 가 아닌 A.x 즉, A의 프로퍼티로 선언하여 B,C를 선언한다면 x를 공유하는 것이 아닌 상속을 받게된다.

var A = function() { console.log("This is Constructor A"); };

A.prototype.x = function() { console.log("This is A.prototype.x"); };

var B = new A();

B.x(); //"This is A.prototype.x"

B.__proto__.x = function() { console.log("Edit B.__proto__.x"); };

B.x(); //"Edit B.__proto__.x"

var C = new A();

C.x(); //Edit B.__proto__.x

C.__proto__.x = function() { console.log("Edit C.__proto__.x"); };

C.x(); //Edit C.__proto__.x

B.x(); //Edit C.__proto__.x

A.prototype.x(); //Edit C.__proto__.x

진짜 재밌지 않는가? 이건 마치 자유도 최강인 GTA시리즈를 게임하는 느낌이다!

 

이런 방법으로 상속을 해 상속받은 객체들의 부모객체의 prototype의 메소드를 수정하면 모든 상속받은 객체의 메소드를 수정할 수 있다는 장점이 있다. (단, 상속객체가 별도의 재정의를 하지 않는다는 가정하에 말이다.)