[js] 프로토타입

자바스크립트를 프로토타입 기반 객체 지향 언어라고 한다. 이 글은 프로토타입이 무엇인지에 대해 공부한 내용을 일부분 정리한 내용이다.

프로토타입 객체란?

프로토타입(원형)은 어떤 객체의 부모 역할을 하는 객체를 말한다.

프로토타입 객체는 객체 간의 상속을 구현하기 위해 자바스크립트가 사용한다.

즉, 객체는 자신의 부모 객체인 프로토타입에 존재하는 식별자들을 사용할 수 있다는 말이다.

그럼 프로토타입은 어디에 저장되어있을까?

모든 객체는 자신의 부모 역할을 하는 프로토타입을 가지고 있다. 그렇다면 어디에 저장되어 있는 것일까?

• 모든 객체는 [[Prototype]] 이라는 내부 슬롯이 존재한다. 여기에 프로토타입 참조를 가지고 있다.
• 내부 슬롯은 자바스크립트 엔진을 위한 영역으로, 개발자가 직접 접근할 수 없다. 따라서 간접적으로 접근하기 위해 __proto__ 프로퍼티를 사용한다.

프로토타입 객체와 생성자 함수

프로토타입 객체는 생성자 함수와 연결되어있다. 프로토타입은 constructor 프로퍼티를 가지고 있는데, 이를 통해서 생성자 함수(or 클래스)에 접근할 수 있다.

• prototype 프로퍼티는 생성자 역할이 가능한 객체만 가지고 있다. (생성자 함수, 클래스)

프로토타입과 생성자 함수의 관계

__proto__ 프로퍼티

모든 객체는 __proto__ 프로퍼티를 사용해 자신의 프로토타입[[Prototype]] 내부슬롯에 간접적으로 접근할 수 있다.

Object.prototype.__proto__

__proto__프로퍼티는 모든 객체에 존재해야한다. 따라서 모든 객체가 반드시 상속받는 Object.prototype.__proto__를 상속 받아서 사용한다.

Person 클래스로 생성한 person의 프로토타입(Person.prototype)의 프로토타입인 Object.prototype에서 볼 수 있는 __proto__

__proto__보다는 메서드를 사용하자.

ES5까지 __proto__는 비표준이였다.

따라서 프로토타입 참조를 얻고 싶은 경우에는 Object에 존재하는 메서드를 사용하는 것이좋다.

const obj = {};
const parent = {x:1};

// obj 객체의 프로토타입
Object.getPrototypeOf(obj);

// obj 객체의 프로토타입 교체
Object.setPrototypeOf(obj,parent); // obj.__proto__ = parent;

console.log(obj.x); // 1

함수 객체(class)만 가지는 prototype 프로퍼티

prototype 프로퍼티는 constructor 역할을 할 수 있는 객체만 가질 수 있는 프로퍼티다.

생성자 함수(or Class)가 생성할 인스턴스의 프로토타입 객체를 가리킨다.

• 단, non-constructor 생성자 역할을 할 수 없는 함수인 경우 prototype 프로퍼티를 가지고 있지않다.

function Person(name){
	this.name = name;
}
const me = new Person("Kim");

// Person 생성자 함수의 prototype과 Person 인스턴스의 __proto__(프로토타입)은 같다.
Person.prototype === me.__proto__; // true

prototype 객체의 constructor 프로퍼티와 생성자 함수

모든 프로토타입은 생성자 함수(or 클래스)와 연결되어있다.

연결되어있기 때문에 연결을 위한 프로퍼티가 존재한다.

• 프로토타입 객체의 constructor 프로퍼티는 생성자 함수(or 클래스)를 가리킨다.
• 생성자 함수(or 클래스)의 prototype 프로퍼티는 프로토타입 객체를 가리킨다.

이러한 연결은 객체(함수, 클래스)가 생성될 때 이루어진다.