프로토타입 체인 해부

핵심 개념

모든 JS 객체는 __proto__로 연결된 프로토타입 체인을 가집니다. 속성 접근 시 체인을 따라 올라가며 찾습니다. Object.create()로 프로토타입을 지정한 객체 생성이 가능합니다. hasOwnProperty()는 상속이 아닌 자신의 속성인지 확인합니다. 클래스 문법은 프로토타입 기반 상속의 문법적 설탕입니다. 프로토타입 메서드를 지우며 상속이 끊기는 것을 확인하십시오.

코드 분석

JS📋 코드 (22줄)

function Machine(model) {
    this.model = model;
    this.energy = 100;
  }

  Machine.prototype.report = function() {
    return this.model + ' ENERGY: ' + this.energy + '%';
  };

  Machine.prototype.consume = function(amount) {
    this.energy -= amount;
    return this;
  };

  const t800 = new Machine('T-800');
  const t1000 = Object.create(t800);
  t1000.model = 'T-1000';

  document.write('<div style="color:#10b981;margin-bottom:4px;">t800.report(): ' + t800.report() + '</div>');
  document.write('<div style="color:#f59e0b;margin-bottom:4px;">t800.consume(30): ' + t800.consume(30).report() + '</div>');
  document.write('<div style="color:#22c55e;margin-bottom:4px;">t1000 (프로토타입 상속): ' + t1000.report() + '</div>');
  document.write('<div style="color:#888;">hasOwn model: ' + t800.hasOwnProperty(\'model\') + ' | report: ' + t800.hasOwnProperty(\'report\') + '</div>');

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 JS '프로토타입 체인' 코드의 잠재적 버그와
메모리 누수·this 바인딩·비동기 경합 위험을
분석해서 프로덕션 수준으로 개선해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'프로토타입 체인'를 실제 서비스에서 어떻게 쓰는지
구체적 사례 3개와 복사 가능한 코드를
초보자가 이해할 수 있게 보여줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 JS '프로토타입 체인' 관련 코드 전체의 실행 흐름을 분석하고
성능 병목과 최적화 방안을 우선순위로 알려줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

'프로토타입 체인'에서 개발자들이 가장 많이 하는
실수 Top 3을 솔직하게 알려주고
2026년 권장 패턴을 함께 알려줘.

⭐ 이것만 기억하세요

프로토타입 체인 해부는 이 3가지만 확실히 잡으세요

1.instanceof가 예상과 다르게 동작하거나, Object.create()의 결과를 이해하려면 프로토타입 체인 지식이 필수입니다

2.모든 객체는 __proto__로 부모 객체를 참조하며, 프로퍼티 조회 시 체인을 따라 위로 올라가며 검색합니다

3.다음 챕터에서 배열을 원하는 순서로 정렬하는 sort 메서드와 비교함수를 배웁니다

💬 이 챕터 질문 보기

JS · CH.30 — 질문하거나 답변을 확인하세요

→

진행도 30 / 34

← 커리큘럼으로 ← 목록으로 (JavaScript)