우선 이 포스트는 http://insanehong.kr/post/javascript-prototype/#toc_291 를 읽고
나름 정리와 추가코드를 작성한 것임을 미리 밝히고 시작하겠습니다.
그래서 해당 블로그의 글을 읽고 오시면 더 도움이 되실것 같습니다.
SF만화나 영화를 보면 프로토타입이란 단어가 간혹 들린다. 예를 들자면 어떤 사이보그들의 모체 혹은 처음 버전을 프로토타입이라고
얘기를 하는데, 자바스크립트에서의 프로토타입도 이와 크게 다르지 않다.
자바스크립트에서의 프로토타입은 객체생성의 모체가 되는 놈을 말한다.
여기까지는 대부분 아는데, 이 프로토타입에는 2가지 유형이 있다는 것을 대부분은 모르고 있다.
프로토타입에는 프로토타입 연결과 프로토타입 속성 2가지가 있다.
이때, 흔히 API나 책에서 정의 내리고 있는 프로토타입은 프로토타입 연결인데,
우리가 활용하고 작성하는 코드들은 프로토타입 속성을 이용한 것이다.
아래와 같은 코드를 chrome 개발자도구의 console에 입력해보자
function Member(){
this.x = "this";
};
Member.prototype.x = "protoX";
Member.prototype.y = "protoY";
Member.x = "x";
var a = new Member();
console.log(a.x);
실행을 하기전에 결과를 생각해보자.
자 생각해보자 기존에 우리는 prototype을 변경하면 해당 객체로 생성된 모든 하위객체들이 영향을 받는다고 알고 있었다.
그결과로 a.y에는 정상적으로 protoY가 출력됨을 확인할 수 있다.
그렇다면 Member.prototype.x 의 값을 protoX로 변경했으니 a.x 에도 protoX가 들어있어야 하지 않나??
하지만 결과는 this이다.
여기서 개발자도구의 watch Expressions로 각각 속성값들이 어떻게 할당되어있는지 확인해보겠다.
a의 속성에는 x와 _proto_ 2가지가 있음을 알 수 있다.
a의 _proto_는 어디에서 나온것일까? 추가적으로 Member의 속성도 확인해보겠다.
Member의 속성을 보면 특이한 점을 발견할 수 있다.
Member의 x라는 속성은 x라는 값을 가지고 있다.
a와 동일한 x값을 가지고 있지 않다.
또하나, prototype 이란 속성과 _proto_ 라는 속성 2가지가 있다는 점이다.
두 속성의 하위 속성들을 보면 a의 _proto_ 와 동일한 속성을 가진 놈을 찾을 수 있다.
바로 prototype 속성이다.
위 과정들을 보며 탁하고 감이 오는가?
a는 Member로 직접 객체생성이 된 것이 아니라, Member의 prototype 이란 속성으로 객체생성이 되었다는 것이다.
여기에서 Member.prototype을 프로토타입속성
a._proto_ 를 프로토타입 연결 이라고 한다.
즉, 자바스크립트에서는 최초 객체생성시 원형 객체의 prototype에 있는 원형의 복사본을 통해서 객체를 생성하는데,
이로인해 하위 객체들은 원형 객체인 Member의 영향을 받지 않고, 원형의 prototype 에 영향을 받게 되는 것이다.
응? 그렇다면 prototype.x = "protoX" 는 왜 동작하지 않는가? 라고 의문을 가질수도 있다.
이것은 자바스크립트 상속에 관한 개념인데,
자바스크립트에서는 해당 객체에 없는 속성은 자신의 _proto_로 계속해서 올라가면서 찾는다.
이로인해, y의 경우 a에 없는 속성이기에 a 의 _proto_인 Member.prototype 에게서 찾아낸 것이고,
x의 경우에는 a에게 있기에 prototype의 x를 쓰지 않은 것이다.
자 정리해보자.
자바스크립트객체에는 프로토타입 속성과 프로토타입 연결 2가지속성이 있는데,
프로토타입 속성이 흔히 우리가 사용하는 프로토타입이며, 이는 선언된 객체의 복사본이다.
프로토타입 연결은 생성된 객체의 원형을 나타내는 속성이다.
prototype에 속성을 추가한다고 하여 무조건 모든 하위 객체에 영향을 주는 것은 아니다.
상속개념으로 인해 하위 객체가 prototype에 추가된 속성과 동일한 이름을 가지고 있을 경우,
하위 객체가 가지고 있는 속성을 먼저 본다.
그리고 하위객체에 해당 속성이 없다면 하위객체의 모체로 찾아가서 속성을 할당받는다.
사용법만 익히면 될것같은 자바스크립트가 갈수록 너무너무 재밌어 진다.
다음 포스트에도 좀 더 개념적으로, 좋은코드로 정리해야겠다.
