JavaScript 프로토타입 객체 관계도

🔗 프로토타입 체인 구조

┌─────────────────────────────────────────────────────────────────┐
│                    Function Constructor                          │
│  ┌─────────────────────────────────────────────────────────────┐ │
│  │                    Person                                   │ │
│  │                 (생성자 함수)                                 │ │
│  │                                                             │ │
│  │  • 함수도 객체이므로 __proto__ 프로퍼티를 가짐                │ │
│  │  • prototype 프로퍼티를 가짐 (함수만의 특별한 프로퍼티)        │ │
│  └─────────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
                              │
                              │ prototype
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│                    Prototype Object                             │
│  ┌─────────────────────────────────────────────────────────────┐ │
│  │                Person.prototype                             │ │
│  │                 (프로토타입 객체)                             │ │
│  │                                                             │ │
│  │  • constructor: Person (생성자 함수를 가리킴)                 │ │
│  │  • 공유할 메서드들이 여기에 정의됨                            │ │
│  │  • sayHello: function() { ... }                            │ │
│  └─────────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
                              ▲
                              │ __proto__
                              │
┌─────────────────────────────────────────────────────────────────┐
│                      Instance                                   │
│  ┌─────────────────────────────────────────────────────────────┐ │
│  │                    person1                                  │ │
│  │                 (인스턴스 객체)                               │ │
│  │                                                             │ │
│  │  • name: "김철수"                                           │ │
│  │  • age: 30                                                  │ │
│  │  • __proto__: Person.prototype (프로토타입 객체를 가리킴)     │ │
│  └─────────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘

📋 주요 개념 정리

1. 생성자 함수의 prototype 프로퍼티

• 역할: 생성할 인스턴스의 프로토타입 객체를 가리킴
• 특징: 함수만이 가지는 특별한 프로퍼티
• 용도: 인스턴스가 공유할 메서드와 프로퍼티를 정의

2. 인스턴스의 proto 프로퍼티

• 역할: 자신의 프로토타입 객체를 가리킴
• 특징: 모든 객체가 가지는 프로퍼티
• 관계: person1.__proto__ === Person.prototype → true

3. 프로토타입 객체의 constructor 프로퍼티

• 역할: 자신을 생성한 생성자 함수를 가리킴
• 관계: Person.prototype.constructor === Person → true

🔄 프로토타입 체인 동작 과정

person1.sayHello() 호출 시:

1. person1 객체에서 sayHello 메서드 검색 → ❌ 없음
2. person1.__proto__ (Person.prototype)에서 검색 → ✅ 발견!
3. Person.prototype.sayHello() 실행

💡 코드 예시

// 생성자 함수
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// 프로토타입에 메서드 추가
Person.prototype.sayHello = function() {
    return `안녕하세요, 저는 ${this.name}입니다.`;
};

// 인스턴스 생성
const person1 = new Person("김철수", 30);
const person2 = new Person("이영희", 25);

// 관계 확인
console.log(person1.__proto__ === Person.prototype);        // true
console.log(Person.prototype.constructor === Person);       // true
console.log(person1.sayHello === person2.sayHello);        // true (같은 메서드 공유)

🎯 핵심 포인트