클래스 해부: ES6 Class

핵심 개념

ES6 클래스는 프로토타입 기반 상속의 문법적 설탕입니다. constructor는 인스턴스 생성 시 자동 호출되고, extends로 상속, super()로 부모 생성자를 호출합니다. static 메서드는 인스턴스 없이 클래스로 직접 호출합니다. #으로 시작하는 private 필드는 클래스 외부에서 접근 불가합니다. 각 메서드를 지우며 객체가 어떻게 무력화되는지 확인하십시오.

코드 분석

JS📋 코드 (39줄)

class Terminator {
    #energy;

    constructor(model, mission) {
      this.model = model;
      this.mission = mission;
      this.#energy = 100;
    }

    report() {
      return `[${this.model}] MISSION: ${this.mission} | ENERGY: ${this.#energy}%`;
    }

    consume(amount) {
      this.#energy = Math.max(0, this.#energy - amount);
      return this;
    }

    static create(model) {
      return new Terminator(model, 'TERMINATE');
    }
  }

  class T1000 extends Terminator {
    constructor() {
      super('T-1000', 'LIQUID METAL INFILTRATION');
    }

    shapeshift(form) {
      return `[T-1000] SHAPESHIFTING TO: ${form}`;
    }
  }

  const t800 = Terminator.create('T-800');
  const t1000 = new T1000();

  document.write('<div style="margin-bottom:6px;color:#10b981;">' + t800.report() + '</div>');
  document.write('<div style="margin-bottom:6px;color:#f59e0b;">' + t800.consume(30).report() + '</div>');
  document.write('<div style="color:#22c55e;">' + t1000.shapeshift('John Connor') + '</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년 권장 패턴을 함께 알려줘.

⭐ 이것만 기억하세요

클래스 해부: ES6 Class는 이 3가지만 확실히 잡으세요

1.같은 구조의 객체를 매번 리터럴로 만들면 코드가 중복되고, 공통 메서드를 공유할 수 없습니다

2.class는 constructor로 인스턴스를 초기화하고, 메서드를 프로토타입에 정의하며, extends로 상속합니다

3.다음 챕터에서 배열을 더 정밀하게 다루는 고급 메서드 find, some, every, flat을 배웁니다

💬 이 챕터 질문 보기

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

→

진행도 17 / 34

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