자바스크립트 관련 글은 잘 안쓰는편인데, 프로토타입 개념만큼은 중요하다고 판단해서
블로그에 포스팅 함으로 써 정리해보고자 한다.
Prototype vs Class
우선 자바스크립트는 객체기반 언어이다. 객체 지향과는 다른데, 필자는 class 가 없다는 점이 가장 다르다고 생각한다.
물론 ECMA 6 부터는 class 라는 문법이 새로 추가됬지만, 그렇다고 JS 가 갑자기 자바나 C# 같은 객체지향형 언어로 바뀌었다는건 아니다. 그냥 보기 편해졌을뿐.
필자는 자바부터 배워왔기 때문에 class 용어에 익숙하다. 덕분에 프로토타입은 이해하기 어려웠고 매우 어색했다.
하지만 js 에서는 프로토타입은 아주 중요한 개념이고 고급 자바스크립트 개발자로 거듭나기 위해서는
꼭 이해해야만 하는 과정이므로 포기해서는 안된다.
서론은 이쯤에서 접고 본론으로 넘어가겠다.
함수가 만들어지는 과정
먼저 함수가 만들어지는 과정에 대해 이해할 필요가 있다.
새로운 VTuber() 함수를 만들었다. (관행적으로 생성자 함수는 첫 글자를 대문자로 처리한다)
내부적으로는 아래와 같이 처리된다.
VTuber() 함수를 선언하는 순간 내부적으로는 위와 같이 동작한다.
함수와 (함수도 객체다) 프로토타입 객체 이렇게 두개의 객체가 만들어지는데,
VTuber.prototype 은 프로토타입 오브젝트를 가르키고,
VTuber.prototype.constructor 는 함수 본문을 가르키게 된다.
새로운 객체 만들기
좋다. 이제 VTuber 를 통해 새로운 객체를 생성해보겠다.
VTuber 를 생성자 함수로 사용하여 leona 라는 객체를 만들었다.
내부적으로는 아래와 같이 실행된다.
1. 먼저 빈 객체를 만든다.
2. 빈 객체의 프로토타입을 생성자 함수의 prototype 을 가르키도록 한다.
3. 함수를 실행하고 만들어진 빈 객체를 리턴한다.
실행 결과는 아래와 같다.
__proto__ 는 무엇일까?
이것을 프로토타입 링크(Prototype Link)라고 한다. 자신을 생성한 함수의 프로토타입을 가르킨다.
이 개념을 위 예제에 적용해보면.
leona 객체는 VTuber() 라는 함수가 생성했으므로, leona.__proto__ 는 VTuber.prototype 을 가르키고
있을것이라고 예상 할 수 있다.
검증해보자.
이제 아래와 같이 그림을 그릴 명목이 생겼다.
__proto__ 는 모든 객체에 있다. 함수도 객체이므로 함수에도 __proto__ 가 있다.
그림 오른쪽을 보면 VTuber Prototype Object 에 __proto__ 라는 프로퍼티가 있다.
이제 의문이 생긴다. VTuber.prototype.__proto__ 는 무엇을 가르키고 있을까?
앞서 이해한 개념을 적용해보자.
(1) 자바스크립트에서 모든 객체의 조상은 Object 이다.
(2) 함수도 객체이므로 VTuber() 함수의 조상은 Object 일 것이다.
(3) __proto__ 는 자신을 생성한 조상의 프로토타입을 가르킨다고 했다.
즉, VTuber.prototype.__proto__ 는 Object.prototype 과 같을것이라는 유추를 얻을 수 있다.
맞는지 검증해보자.
이제 아래와 같이 그림을 그릴 명목이 생겼다.
이렇게 __proto__ 속성을 통해서 상위 프로토타입과 연결되어 있는것을 체인이라고 한다.
여기서 영리한 독자는 Object.prototype.__proto__ 속성은 무엇을 가르키고 있을지 궁금할 것이다.
개념에서 우리는 Object 는 모든 객체의 조상이라고 했다.
__proto__ 는 자신을 생성한 조상의 프로토타입을 가르켜야하는데, Object 의 조상은 없다.
답은 간단하다. null 이다.
마치며
이로써 프로토타입 오브젝트와 프로토타입 링크에 대한 이해를 마쳤다.
처음에는 어렵다고 느낄 수 있지만 막상 해보면 별로 어렵지 않다.
필자도 자바 스크립트를 배우면서 프로토타입이 나오면 구역질을 했지만 해보니 별로 어려운게 아니었다는걸
새삼 깨달았다.
틀린 부분이 있다면 지적 해주시면 감사하겠습니다.