반응형
Prototype Pattern(프로토타입 패턴) 은 기존 객체를 복제하여 새로운 객체를 생성하는 구조의 디자인 패턴입니다. 자바스크립트는 본래 프로토타입 기반 언어이기 때문에, 이 패턴을 매우 자연스럽게 구현할 수 있습니다.
🧱 Prototype Pattern이란?
Prototype Pattern은 기존 객체를 복제(clone)하여 새로운 객체를 생성하고, 해당 객체를 기반으로 기능을 확장하는 방식입니다. 객체 간 상속보다 복제와 덮어쓰기를 통한 유연한 설계가 가능하며, 메모리 효율이 높습니다.
const animal = {
type: '동물',
speak() {
console.log(`${this.name}가 소리를 냅니다.`);
}
};
const dog = Object.create(animal);
dog.name = '강아지';
dog.speak(); // 강아지가 소리를 냅니다.
✅ 장점
- 메모리 효율: 공통 속성과 메서드를 공유하므로 메모리 낭비가 없음
- 객체 간 동적 확장: 객체를 유연하게 확장하거나 오버라이드 가능
- 구현이 간결함: Object.create() 등 내장 함수로 간단하게 구현 가능
❌ 단점
- 상속 구조 파악이 어려움: 깊은 prototype chain은 디버깅을 어렵게 만듦
- 초보자에게 직관적이지 않음: 클래스 기반 OOP에 익숙한 개발자에게는 개념이 생소할 수 있음
- 모든 브라우저에서 완전 동일하게 작동하지 않을 수 있음 (구버전 호환성 이슈)
🛠️ 실전 예시: 프로토타입 기반 메시지 객체
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 |