Programing/javascript

자바스크립트 Prototype Pattern

2025. 4. 19. 08:49
반응형

Prototype Pattern(프로토타입 패턴) 은 기존 객체를 복제하여 새로운 객체를 생성하는 구조의 디자인 패턴입니다. 자바스크립트는 본래 프로토타입 기반 언어이기 때문에, 이 패턴을 매우 자연스럽게 구현할 수 있습니다.


🧱 Prototype Pattern이란?

Prototype Pattern은 기존 객체를 복제(clone)하여 새로운 객체를 생성하고, 해당 객체를 기반으로 기능을 확장하는 방식입니다. 객체 간 상속보다 복제와 덮어쓰기를 통한 유연한 설계가 가능하며, 메모리 효율이 높습니다.

const animal = {
    type: '동물',
    speak() {
        console.log(`${this.name}가 소리를 냅니다.`);
    }
};

const dog = Object.create(animal);
dog.name = '강아지';
dog.speak(); // 강아지가 소리를 냅니다.

✅ 장점

  1. 메모리 효율: 공통 속성과 메서드를 공유하므로 메모리 낭비가 없음
  2. 객체 간 동적 확장: 객체를 유연하게 확장하거나 오버라이드 가능
  3. 구현이 간결함: Object.create() 등 내장 함수로 간단하게 구현 가능

❌ 단점

  1. 상속 구조 파악이 어려움: 깊은 prototype chain은 디버깅을 어렵게 만듦
  2. 초보자에게 직관적이지 않음: 클래스 기반 OOP에 익숙한 개발자에게는 개념이 생소할 수 있음
  3. 모든 브라우저에서 완전 동일하게 작동하지 않을 수 있음 (구버전 호환성 이슈)

🛠️ 실전 예시: 프로토타입 기반 메시지 객체

const messageTemplate = {
    type: 'info',
    send(content) {
        console.log(`[${this.type.toUpperCase()}] ${content}`);
    }
};

const errorMessage = Object.create(messageTemplate);
errorMessage.type = 'error';
errorMessage.send('서버 오류가 발생했습니다.'); // [ERROR] 서버 오류가 발생했습니다.

const successMessage = Object.create(messageTemplate);
successMessage.type = 'success';
successMessage.send('저장이 완료되었습니다.'); // [SUCCESS] 저장이 완료되었습니다.

🧩 결론

Prototype Pattern은 자바스크립트의 언어적 특성과 매우 잘 맞는 구조로, 객체 복제와 동적 확장이 필요한 상황에서 강력한 도구가 됩니다. 단, 프로토타입 체인에 대한 개념이 익숙하지 않다면 디버깅이나 유지보수에 어려움을 겪을 수 있으므로, 명확한 구조와 일관성 있는 사용이 중요합니다.

반응형

'Programing > javascript' 카테고리의 다른 글

자바스크립트 Facade Pattern  (0) 2025.04.19
자바스크립트 Decorator Pattern  (0) 2025.04.19
자바스크립트 Module Pattern  (0) 2025.04.19
자바스크립트 Builder Pattern  (0) 2025.04.19
자바스크립트 Singleton Pattern  (0) 2025.04.19
자바스크립트 Factory Pattern  (0) 2025.04.19
자바스크립트 Constructor Pattern  (0) 2025.04.19
자바스크립트의 Behavioral 패턴: 객체 간의 소통을 설계하다  (0) 2025.04.19
'Programing/javascript' 카테고리의 다른 글
  • 자바스크립트 Module Pattern
  • 자바스크립트 Builder Pattern
  • 자바스크립트 Singleton Pattern
  • 자바스크립트 Factory Pattern
Dongkkase
Dongkkase
개발자로 일하면서 부딪히는 문제풀이가 누군가에게 도움이 되길 바라며
    반응형
  • Dongkkase
    정집사의 개발로그
    Dongkkase
  • 전체
    오늘
    어제
    • All (478)
      • 금융 (61)
      • Programing (295)
        • Algorithm (39)
        • API (2)
        • javascript (122)
        • CSS (8)
        • HTML (10)
        • PHP (15)
        • JAVA (27)
        • JSP (17)
        • JSP 예제 (1)
        • IOS (1)
        • Android (1)
        • Sencha Touche (1)
        • bat file, cmd (0)
        • 디버깅 (2)
        • SQL (21)
        • MS-SQL (1)
        • MySQL (13)
        • 보안 (5)
      • Server (14)
        • Docker (1)
        • Windows (9)
        • Linux (3)
        • jeus (1)
      • Database (6)
      • IT 일반 (15)
      • 리뷰 (38)
        • Book (17)
        • 제품 (2)
        • 영화 소개 (11)
        • 음악 소개 (7)
      • 잡생각 (36)
        • 회고 (3)
        • 컬럼 (4)
        • 자료실 (6)
        • 낙서장 (12)
        • 위시리스트 (2)
        • WOW (1)
        • 덕 (1)
  • 인기 글

  • 최근 댓글

  • 태그

    사고 싶은 책
    디자인패턴
    블로그
    읽고 싶은 책
    SQL
    php
    js패턴
    자바
    jsp
    It
    기초
    iT's MY LiFE
    IT·컴퓨터
    자바스크립트
    JavaScript
    IT 관련
    자바스크립트유틸
    IT블로그
    Java
    위시리스트
Dongkkase
자바스크립트 Prototype Pattern
상단으로

티스토리툴바