[FE] JavaScript에서의 프로토타입(Prototype)

객체지향언어

Java, Python 등 객체지향언어에서 클래스는 매우 중요한 개념

새로운 클래스에서 기존 클래스의 모든 프로퍼티와 메소드를 사용하는 상속을 할 수 있으니까

상속을 통해서 추상화, 캡슐화를 시킬 수 있는게 객체 지향 프로그래밍의 특징

자바스크립트 또한 객체지향 언어인데, 클래스를 사용하지 않음

=> 대신 프로토타입을 이용한 클로닝과 객체특성을 확장해 나가는 방식을 통해 새로운 객체를 생성

따라서 자바스크립트는 프로토타입 기반 언어라고 불린다

 

최근 ECMA6 표준에서 Class 문법이 추가되었으나 자바스크립트가 클래스 기반으로 바뀐것은 아니니까...

Prototype

자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있음

=> 연결을 통해서 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용

이러한 부모객체를 프로토타입 객체 또는 프로토타입이라고 한다

자바스크립트의 모든 객체는 Object 객체의 프로토타입을 기반으로 확장되었기 때문에 연결의 끝은 Object 객체의 프로토타입 Object

function A() {};
var A = new A();

여기서 function A가 A라는 변수의 프로토타입 객체

=> 자바스크립트는 원시타입을 제외하고 모든 참조 타입이 객체니까 함수도 객체

[[Prototype]] vs prototype 프로퍼티

모든 객체는 자신의 프로토타입 객체를 가리키는 [[Prototype]] 인터널 슬롯이 존재

=> 객체 입장에서 자신의 부모 역할을 하는 프로토타입 객체를 가리킨다

=> __proto__ 프로퍼티 라고도 부름

함수도 객체이므로 해당 슬롯이 존재하며 일반 객체와 달리 prototype 프로퍼티도 소유

이 때 prototype 프로퍼티는 함수 객체만 가지고 있는 프로퍼티

Prototype 프로퍼티

모든 함수 객체의 constructor는 prototype이란 프로퍼티를 가지고 있음

Prototype 프로퍼티는 객체가 생성될 당시 만들어지는 객체 자신의 원형이 될 프로토타입 객체를 가리킨다

=> 자신을 만든 원형이 아닌 자신을 통해 만들어질 객체들이 원형으로 사용 할 객체를 가리킨다

Prototype Object

객체는 언제나 함수를 통해 생성

var obj = {};

위와 같은 코드도 사실 다음코드와 동일

var obj = new Object();

함수의 정의

function Person() {}

위와 같이 Person 함수가 생성되면 해당 함수의 Prototype Object 생성

함수의 프로토타입 프로퍼티가 해당 프로토타입 객체를 가리킴

프로토타입 객체는 기본적인 속성으로 construtor와 __proto__를 소유

프로토타입 객체의 constructor가 정의된 함수에 생성자 자격을 부여

=> 해당 자격이 부여되어야 new를 통해 객체를 만들 수 있다

Prototype Link

function Person() {}
Person.prototype.eyes = 2;
var kim = new Person();
console.log(kim.eyes); // 2

kim 객체에는 eyes가 없는데 어떻게 2라는 값을 참조하는거지?

 

__proto__를 이용해서 부모 함수의 Prototype 객체를 가리킨다

=> __proto__ 속성은 모든 객체가 가지고있다

만약 객체가 특정 속성을 가지고 있지 않으면 해당 속성을 찾을 때 까지 상위 프로토타입을 탐색

만약 최상위인 Object의 프로토타입 객체에서도 찾지 못했을 경우 undefined를 반환

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

프로토타입을 사용하는 이유?

메모리

클래스 방식에 비해 메모리를 아낄 수 있음

클래스는 새로운 인스턴스를 만들 때 복사를 이용하지만 프로토타입은 객체와 객체를 연결하기 때문

 

예를 들어 하나의 클래스에서 100개의 인스턴스를 만든다면 클래스의 메서드를 100번 복사해야하지만,

프로토타입에서는 프로토타입 객체에 있는 메서드를 참조하는거니까 메서드는 단 1개만 존재

 

단 복사가 아니라 상위 객체에서 메소드를 검색하는 것이기 때문에 비교적 속도가 느려지긴 함

주의사항

프로토타입은 새로운 프로퍼티나 메소드를 추가할 수 있음

따라서 자바스크립트 표준 객체의 포로토타입도 임의로 수정할 수 있으나 오류 발생 가능성이 크다

=> 가급적 자바스크립트 표준 객체의 프로토타입은 수정하지 말자!

---

ECMAScript ECMA International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어