프로토타입 체인

체인이 연결되는 구조

이전 글에서 객체가 [[Prototype]]으로 다른 객체와 연결되는 것을 봤습니다. 이 연결이 여러 단계로 이어진 것이 프로토타입 체인 (prototype chain) 입니다.

const base = { type: "animal" };
const dog = { bark: true, __proto__: base };
const puppy = { age: 1, __proto__: dog };

puppy에서 속성을 찾을 때, 엔진은 이 경로를 따릅니다.

puppy → dog → base → Object.prototype → null

코드

1const base = { type: "animal" };◄

2const dog = { bark: true, __proto__: base };◄

3const puppy = { age: 1, __proto__: dog };◄

5puppy.age; // 1 (puppy)

6puppy.bark; // true (dog)

7puppy.type; // "animal" (base)

8puppy.fly; // undefined (null에 도달)

프로토타입 체인

puppy

age1

[[Prototype]]→ dog

↓

dog

barktrue

[[Prototype]]→ base

↓

base

type"animal"

[[Prototype]]→ Object.prototype

↓

Object.prototype

toStringfunction

[[Prototype]]→ null

↓

null

3단계 프로토타입 체인: puppy → dog → base → Object.prototype → null. 모든 체인은 결국 null에서 끝납니다.

속성 탐색 알고리즘

엔진이 obj.prop을 평가할 때:

obj 자체에 prop이 있으면 반환
없으면 obj.[[Prototype]]에서 찾기
거기에도 없으면 obj.[[Prototype]].[[Prototype]]에서 찾기
...반복...
null에 도달하면 undefined 반환

puppy.age;   // 1        , puppy에서 발견 (1단계)
puppy.bark;  // true     , dog에서 발견 (2단계)
puppy.type;  // "animal" , base에서 발견 (3단계)
puppy.fly;   // undefined, null에 도달 (탐색 실패)

Object.prototype, 체인의 끝

거의 모든 객체의 체인 끝에는 Object.prototype이 있습니다. 우리가 모든 객체에서 쓸 수 있는 메서드들이 여기에 있습니다.

const obj = { a: 1 };

// 모두 Object.prototype에서 상속
obj.toString();        // "[object Object]"
obj.hasOwnProperty("a"); // true
obj.valueOf();         // { a: 1 }

체인 구조:

obj → Object.prototype → null

Object.prototype의 [[Prototype]]은 null입니다. 여기가 체인의 진짜 끝입니다.

Object.prototype이 없는 객체

const bare = Object.create(null);
bare.toString; // undefined, Object.prototype도 없음

Object.create(null)은 [[Prototype]]이 null인 객체를 만듭니다. toString 같은 기본 메서드도 없는 "순수한 딕셔너리"입니다. Map 대신 쓰이기도 합니다.

프로퍼티 섀도잉의 규칙

데이터 프로퍼티

프로토타입에 같은 이름의 속성이 있어도, 객체 자체에 쓰면 자체 속성이 됩니다.

const proto = { x: 10 };
const obj = { __proto__: proto };

obj.x; // 10 (proto에서 읽기)

obj.x = 20; // obj에 자체 속성 생성

obj.x;   // 20 (obj 자체)
proto.x; // 10 (변하지 않음)

getter/setter가 있는 경우

프로토타입의 속성이 setter를 가지고 있으면, 쓰기도 프로토타입의 setter를 호출합니다.

const proto = {
  get value() { return this._value; },
  set value(v) { this._value = v; }
};

const obj = { __proto__: proto };
obj.value = 42;

// obj._value는 42 (this가 obj이므로 obj에 저장)
// obj.value는 42 (getter가 this._value 반환)

성능과 주의사항

체인 길이

체인이 길면 속성 탐색이 느려질 수 있습니다. 하지만 V8 엔진의 인라인 캐시 (시리즈 1에서 다뤘습니다) 가 이를 최적화합니다. 실제로는 체인 길이보다 구조 변경이 성능에 더 큰 영향을 줍니다.

런타임에 프로토타입 변경하지 마세요

// 나쁜 패턴, 성능 저하
Object.setPrototypeOf(obj, newProto);

// 좋은 패턴, 생성 시 설정
const obj = Object.create(newProto);

Object.setPrototypeOf는 V8의 최적화를 무효화합니다. 프로토타입은 객체 생성 시 한 번 설정하고 변경하지 않는 것이 좋습니다.

다음 단계

프로토타입 체인의 동작을 이해했습니다. 다음 글에서는 new 키워드와 생성자 함수가 이 체인을 어떻게 자동으로 설정하는지 살펴보겠습니다.