프로토타입

Minsu Lee·2023년 5월 12일

✨SEB FE

프로토타입에 대한 내용을 다뤄봅니다.! <- 어렵 ㅠㅁㅠ 모던 자바스크립트 deep dive 참조

💡 I am not afraid of storms for I am learning how to sail my ship.

📌 프로토타입

JavaScript는 프로토타입을 기반으로 상속을 구현하여 불필요한 증복을 제거할 수 있다.
중복을 제거하는 방법은 기존의 코드를 적극적으로 재사용하는 것이다. (코드를 재사용하는 것은 개발 비용을 줄일 수 있는 중요한 부분이다.)

prototype 프로토타입

프로토 타입은 어떤 객체의 상위(부모)객체의 역할을 하는 객체로서 다른 객체에 공유 프로퍼티(메서드 포함)을 제공한다.

모든 객체는 하나의 프로토 타입을 갖고 모든 프로토타입은 생성자 함수와 연결되어 있다.

`proto` 접근자 프로퍼티

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

__proto__ 접근자 프로퍼티는 객체가 직접 소유하는 프로퍼티가 아니라 Object.prototype의 프로퍼티이다. 모든 객체는 상속을 통해 Object.prototype.__proto__ 접근자 프로퍼티를 사용할 수 있다.

접근자 프로퍼티를 사용하는 이유는 상호 참조에 의해 프로토타입 체인이 생성되는 것을 방지하기 위해서이다.

const parent = {};
const child = {}

child.__proto__ = parent;
parent.__proto__ = child; //<- TypeError
//프로토타입 체인의 종점이 없어짐

프로토타입 체인은 단방향 링크드 리스트로 구형되어야한다.

함수 객체가 소유하는 prototype 프로퍼티는 생성자 함수가 생성할 인스턴스의 프로토타입을 가리킨다. 따라서 생성자 함수를 호출할 수 없는 non-constructor함수와 화살표 함수, 메서드 축약 표현으로 정의한 메서드는 protopype 프로퍼티를 소유하지 않으며 프로토타입도 생성하지 않는다.

구분	소유	값	사용 주체	사용 목적
`__proto__` 접근자 프로퍼티	모든 객체	프로토타입의 참조	모든 객체	객체가 자신의 프로토타입에 접근 또는 교체하기 위해
prototype 프로퍼티	constructor	프로토타입의 참조	생성자 함수	생성자 함수가 자신이 생성할 객체(인스턴스)의 프로토타입을 할당하기 위해 사용

클래스, 인스턴스, 프로토타입

//클래스
class Human {
	constructor(name) {
    	this.name = name;
    }
  	sleep() { console.log(`${this.name} is sleeping.`) }
}

//Human으로 생성한 객체 (인스턴스)
let steve = new Human('steve');

Human.prototype.constructor === Human; // true, 클래스
Human.prototype === steve.__proto__; // true, 프로토타입
Human.prototype.sleep === steve.sleep // true, 인스턴스 - 메서드

console.log(Human.prototype);
// {constructor: class Human, ƒ sleep: sleep()}

steve.__proto__; // 스티브의 프로토타입
steve.__proto__.__proto__; // 스티브의 프로토타입의 프로토타입

맨 아래의 코드처럼 __proto__를 이용하여 인스턴스의 프로토타입, 그 프로토타입의 프로토타입을 체인의 끝인 Object까지 확인할 수 있다.

정리..

Prototype : 프로토타입 객체이다.
[[Prototype]] : 모든 객체가 가지고 있는 내부 슬롯으로 객체가 생성되는 방식에 따라 이곳에 프로토타입이 결정된다.
__proto__ : 모든 객체가 가지고 있는 접근자 프로퍼티로 이를 통해 자신의 프로토타입([[Prototype]]) 내부 슬롯에 간접적으로 접근할 수 있다.