[js] 프로토타입

일반적 객체지향 언어에는 Class 라는 개념이 있는데, 자바스크립트에는 Class라는 개념이 아닌 프로토타입 이라는 것을 사용한다.

ECMA6에 이르러 Class라는 키워드가 생기긴 했지만, 자바스크립트는 프로토타입언어이다.

참고로, 프로토타입을 공부 하면서 아 내가 머리가 좋지 않구나 라는 것을 뼈저리게 느끼게 되었다.

이 글은 이곳 저곳 구글링하다 여러 블로그를 참고하여 정리를 해 논 것이기 때문에 정확한 이해가 필요한 사람은 링크를 통해 이해바란다.

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

http://insanehong.kr/post/javascript-prototype/

본론으로 들어가 프로토타입 이라는 것이 무엇인가?

기존의 객체를 복사, 새로운 객체를 생성하는 방법이 프로토타입기반의 언어의 특징이다.

좀 더 파고들어보면 자바스크립트는 함수를 1급객체로 취급하는데 ( 찾아봐라 이건 쉽다) 

이러한 특성이 함수를 클래스와 같이 사용이 가능하다.

아래와 같이 빈 껍데기의 함수를 생성했다.

function Person() {}

위의 정의를 내부적으로 보면

크롬이나 사파리 기타 브라우저 개발자 툴을 사용해 Person 함수의 속성을 보면 이런 모습일 것이다( 본인은 크롬) 

여길 보면 Person함수에 prototype이라는  속성이 있는데 이게 Person함수의 프로토타입 객체를 참조한다

프로토타입 객체를 보면 constructor속성이 있는데, 이 놈은 다시 Person함수을 참조하고있다.

정리해보면, 우리가 function Person() {}를 통하여 함수를 만들었다면, 내부적으로 우리 눈에는 보이지 않지만 

해당 Person 함수의 조상(원형)이 되는 객체가 생성되고 Person 함수의 속성 prototype을 통해 프로토타입 객체를 참조한다.

프로토타입 객체의 속성 중 constructor는 Person 함수를 참조하여

new 라는 연산자를 사용하여 인스턴스를 할 때 (constructor 호출) Person 함수가 호출되도록 하는 구조다.

자, 이제 Person함수를 사용하여 객체를 생성했을 시 내부적 구조를 살펴 보자.

앞서 말한데로 우리는 Person 함수를 사용하여 프로토타입 객체가 내부적으로 만들어 졌다고 했다.

lei 와 bniz 라는 객체를 생성해보자.

var lei = new Person();

var bniz = new Person();

이는 그림과 다른 이름이지만 (joon, jisoo) 복잡하지 않으니 알아서 이해하도록 하자.

여기서 lei 객체 속을 들여다 보면 __proto__라는 속성이 있고 이는 Person 함수의 프로토타입 객체을 참조하고 있을 것이다.

bniz 객체 또한 속을 들여다 보면 __proto__라는 속성이 있고 이는 Person 함수의 프로토타입 객체을 참조하고 있을 것이다.

이제 대충 머리속에 그려지는가?

Person 함수의 prototype 속성이 참조하는 프로토타입 객체는 new라는 연산자와 Person 함수를 통해 생성된 모든 객체의 원형이 되는 객체인 것이다. 

객체 안에는 proto(비표준) 속성은 객체가 만들어지기 위해 사용된 원형인 프로토타입 객체를 숨은 링크로 참조하는 역할을 한다.

결국엔 우리가 Person 함수에 변수나, 함수를 추가하고 싶다면 Person 함수의 프로토타입 원형을 건드려야 하는 것이다.

이제까지 프로토타입 객체라는 것을 알아 봤는데, 그럼 프로토타입이라는건 뭔가

먼소리냐 싶은가, 사실 프로토타입 객체와 프로토타입은 조금은 다른 것이다.

아래는 내가 설명하고 하는 말을 아주 잘 얘기해주는 글이다.

"자바스크립트에서 사용되는 프로토타입이란 용어는 크게 두가지로 나눈다. 

Prototype 속성이 가리키고 있는 Prototype Object 와 

자기 자신을 만들어낸 객체의 원형을 의미하는 Prototype Link 이다. (나는 지금까지 프로토타입 객체만을 설명하고 있었다.)

자바스크립트 관련 레퍼런스는 대부분 프로토타입에 대한 정의는 객체의 원형을 의미하는 Prototype Link 로 정의하지만 

Prototype 속성을 이용한 객체 확장에 대해서만 다루기 때문에 이 둘의 차이를 자세히 거론하지 않는다. 

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

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