[코어 자바스크립트] 프로토타입

Overview

• 책 정보

  • 제목: 코어 자바스크립트
  • 저자: 정재남
  • 출판사: 위키북스
  • ISBN: 9791158391720
  • 발행일: 2019년 09월 10일
  • 쪽수: 202쪽

• 이 글의 목적 및 대상 독자

  1. JavaScript의 프로토타입 개념을 체계적으로 이해하고 싶은 분
  2. 생성자 함수와 프로토타입 체인 동작 원리를 명확히 알고 싶은 분
  3. 메서드 오버라이드, 다중 체인 등 심화 사례를 직접 실습해 보고 싶은 분

1. 프로토타입의 개념 이해

1.1 constructor, prototype, instance

• constructor: 객체를 생성할 때 호출되는 함수
• prototype: 생성자 함수가 보유한 속성 객체. 모든 인스턴스는 이 객체를 참조한다.
• instance: new 키워드로 생성된 객체. 내부 슬롯 [[Prototype]]을 통해 constructor.prototype과 연결됨.

function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  console.log(`Hello, ${this.name}`);
};

const alice = new Person('Alice');
alice.greet(); // Hello, Alice

💡 Tip
alice.__proto__ === Person.prototype 이고,
Person.prototype.constructor === Person 입니다.

1.2 constructor 프로퍼티

• 모든 prototype 객체에는 기본적으로 constructor가 연결되어 있어 “어떤 함수로 생성됐는지”를 추적할 수 있음.
• 프로퍼티를 덮어쓸 때는 constructor가 사라질 수 있으니 주의!

function Foo() {}
Foo.prototype = {
  bar() { return 'bar'; }
};
console.log(Foo.prototype.constructor === Foo); // false
// 올바르게 유지하려면
Foo.prototype = {
  constructor: Foo,
  bar() { return 'bar'; }
};

2. 프로토타입 체인

2.1 메서드 오버라이드

• 인스턴스 자신에 동일 이름의 메서드를 정의하면, prototype의 메서드는 숨겨진다.

alice.greet = function() {
  console.log('Hi there!');
};
alice.greet(); // Hi there!

2.2 프로토타입 체인

• 객체에 요청된 프로퍼티/메서드를 찾지 못하면 [[Prototype]]을 따라 계속 검색
• 최상위는 Object.prototype, 그 이후 null이 되어 탐색 종료

alice.__proto__  
  ↳ Person.prototype  
      ↳ Object.prototype  
          ↳ null

2.3 객체 전용 메서드의 예외사항

• hasOwnProperty, isPrototypeOf 등 Object.prototype 메서드는 프로토타입 체인의 중간에서 호출해도 동작
• Object.create(null)로 생성한 객체는 체인이 끊겨 있음

const dict = Object.create(null);
console.log(dict.hasOwnProperty); // undefined

2.4 다중 프로토타입 체인

• Object.create()를 두 번 이상 적용해 다단 체인을 구성 가능

const base = { a: 1 };
const mid = Object.create(base, { b: { value: 2, enumerable: true } });
const top = Object.create(mid, { c: { value: 3, enumerable: true } });
console.log(top.a, top.b, top.c); // 1 2 3

3. 정리

• 생성자 함수 constructor, prototype 객체, 인스턴스 [[Prototype]] 관계를 이해
• 프로토타입 체인을 통해 상속과 메서드 공유가 어떻게 이루어지는지 파악
• constructor 프로퍼티 관리, 메서드 오버라이드, 다중 체인, Object.create(null) 예외 등 주요 포인트 숙지

4. 참고 문헌 및 링크

• 『코어 자바스크립트』 정재남, 위키북스
• MDN: Prototype
• JavaScript.info: Prototype and Inheritance