본문 바로가기

Dev.FrontEnd/JavaScript

8. 자바스크립트의 프로토타입(Prototype)

Chapter 8. 자바스크립트의 프로토타입

자바스크립트에는 클래스라는 개념이 없다.
(ECMA 2016부터 정식적으로 등장하긴 했다.)
그래서 기존의 객체를 복사하여 새로운 객체를 생성하는 프로토타입 기반의 언어인 것이다.
그만큼 프로토타입의 이해에 대해서는 필수적이다.

프로토타입이란 무엇인가
어떠한 객체가 만들어지기 위해 그 객체의 모태가 되는 녀석을 프로토타입이라고 한다.
Java에서의 class가 바로 자바스크립트에서의 프로토타입이다.

프로토타입은 두가지로 해석될 수 있다.
하나는 프로토타입 객체를 참조하는 prototype 속성이고
다른 하나는 객체 멤버인 _proto_ 속성이 참조하는 숨은 링크를 말한다.

JavaScript에서 함수를 정의하고 파싱단계에 들어가면 내부적으로 수행되는 작업이 있다.
최종적으로는 생성자 객체와 프로토타입 객체가 함께 정의된다.
두 존재가 같은 객체에 포함되는 것이 아니라 별도로 존재하면서 서로에 대한 참조를 갖고 연결되어 있다.
즉, 함수 멤버로 prototype 속성이 있다.
이 속성은 다른 곳에 생성된 프로토타입 객체를 참조한다.
프로토타입 객체의 멤버인 constructor 속성은 함수를 참조한다.

이 상태에서 new를 통해 생성되는 인스턴스는
프로토타입 객체를 상속하고 있다.
그리고 생성된 인스턴스 역시 프로토타입을 갖는다. 



프로토타입 체인

프로토타입을 상속해서 만들어지는 객체들간의 연관관계를 프로토타입 체인이라고 한다.

프로토타입 객체도 자바스크립트 객체로서 앞에서 설명한 멤버관리구조의 특징을 그대로 갖는다.
즉 (key, value) 쌍으로 된 멤버를 추가할 수 있는 연상 배열 구조인 것이다.
프로토타입 객체에 포함된 멤버를 프로토타입 멤버라고 하며
프로토타입 객체에는 constructor라는 속성이 기본적으로 추가된다.

생성자는 prototype이라는 공개 속성을 통해 프로토타입 객체에 접근할 수 있다.
하지만 인스턴스에서는 직접 프로토타입 객체에 접근할 수 없다.
물론 인스턴스에서 프로토타입 멤버로는 접근이 가능하다.

Person.prototype.getName = function( ){ return this.name; };
프로토타입 메소드 멤버를 추가하는 코드이다.
Person.prototype을 통해 추가하면 그 멤버는 Person의 모든 인스턴스에서 사용할 수 있게 된다.
프로토타입 멤버는
생성자.prototype.프로토타입 멤버 처럼 접근할 수도 있고
인스턴스.프로토타입멤버 처럼 접근할 수 있다.

자바스크립트에서는 객체의 멤버를 언제든지 조작할 수 있게 공개해놓고 있다.
프로토타입 객체의 멤버도 언제든지 멤버를 추가, 제거, 대체할 수 있다.

프로토타입 객체는 함수를 메모리에 정의할 때 한 번만 생성된다.
프로토타입 멤버는 인스턴스 별로 복사본이 존재하는 것이 아니라

해당 생성자에 하나만 존재하면서 그 생성자의 모든 인스턴스가 함께 공유하게 된다.

 


참고한 사이트  http://www.nextree.co.kr/p7323/


#포스팅 내용은 황인균 님의 자바스크립트 객체지향 프로그래밍 이라는 책의 내용을 기반으로 작성되었습니다.
Chapter 8. 끝