[JS] 📝 프로토타입 ⭐

🌌 프로토타입

💡 프로토타입 (Prototype)

JS에서 인스턴스들의 원형을 가리킵니다.

용어

💡 프로토타입 객체 (Prototype Object)

생성자 함수로 생성할 인스턴스들의 원형 (부모) 이 될 객체입니다.

특징

1. 생성자 함수의 prototype 속성으로 연결되어 있습니다.
2. 프로토타입 원형 혹은 특정 인스턴스 모두 프로토타입 객체가 될 수 있습니다.

💡 프로토타입 링크 (Prototype Link)

프로토타입 인스턴스의 원형을 가리킵니다.

특징

1. 인스턴스의 __proto__ 속성으로 연결되어 있습니다.
2. console.log(인스턴스) 실행 시 [[Prototype]] 이라는 이름으로 출력됩니다.

용도

👉 최소한의 메모리로 비슷한 객체 여러 개를 손쉽게 찍어내고 싶을 때 사용합니다.

사용 시 장점

1. 메모리 사용 효율이 증가합니다.
   속성 / 메서드를 상속시켜 재사용하기 때문입니다.

2. 코드를 객체지향적으로 짤 수 있어 가독성 / 재사용성 / 유지보수성이 올라갑니다.

관계

	생성자 함수	인스턴스	프로토타입 객체
프로토타입 객체 접근 방법	prototype	__proto__	__proto__ (부모를 가리킴)
생성자 함수 접근 방법		constructor Object.getPrototypeOf( )	constructor
인스턴스 생성 방법	new 생성자( );

1. 인스턴스.constructor 는 인스턴스.[[Prototype]].constructor와 동일하게 인식됩니다.

2. 인스턴스에서도 Object.getPrototypeOf 를 이용해 프로토타입에 접근할 수 있습니다.

(Object.getPrototypeOf(인스턴스).constructor)(매개변수)

프로토타입 체이닝

💡 프로토타입 체이닝 (Prototype Chaining)

__proto__ 속성을 이용해 상속된 프로토타입을 거슬러 올라가며 속성 / 메소드를 탐색하는 것을 말합니다.

특징

1. 최상위 프로토타입인 Object에서도 찾지 못한 속성과 메서드는 undefined로 처리됩니다.

---

🚧 보충 자료

구성 요소

속성

종류	설명
private 속성	클로저를 이용해 캡슐화/은닉화한 속성입니다.
public 속성	생성자 함수 안에서 this.속성명으로 생성한 속성입니다.
static 속성	생성자 함수에 직접 부여한 속성입니다. 주로 설정값으로 사용됩니다.

메서드

종류	설명	예시
static 메서드	인스턴스를 통해서는 접근할 수 없는 프로토타입 메서드입니다. 인스턴스를 생성하지 않고 바로 사용할 수 있습니다. 주로 순수 유틸리티 함수로 사용됩니다.	Object.keys( )
prototype 메서드	인스턴스가 직접 호출할 수 있는 프로토타입의 메서드입니다.	user.__proto__.getName( ) user.getName( )
인스턴스 메서드	프로토타입에는 없는 인스턴스만의 메서드입니다.	user.__proto__.getAge( ) ❌ user.getAge( )

최상위 프로토타입 (Object)

📕 Object

JS의 최상위 프로토타입입니다.

문제점

JS는 프로토타입 기반 언어입니다.
그래서 기본형 데이터마저도 Object 프로토타입을 상속받고 있습니다.

이 때문에 기본형 데이터에서 객체 전용 메서드를 사용하지 못하게 막고자 prototype 메서드 대신 static 메서드로 구현해 놓았습니다.

→ 그 결과 객체 전용 메서드를 사용하기가 다소 불편해졌습니다.
ex) Object.keys( ), Object.values( ), Object.entries( ), ...