
출처: 에릭 감마 , 리처드 헬름 , 랄프 존슨 , 존 블리시디스. 『Gof의 디자인 패턴』. 김정아(역). 프로텍미디어, 2015.
[4일차] 프로토타입(Prototype)
생성 패턴 5일만에 끝내기 챌린지 - GoF 디자인 패턴
타입스크립트로 설명하는 GoF 디자인 패턴의 생성 패턴 5일만에 끝내기 챌린지
프로토타입이란?
원형이 되는 인스턴스를 사용하여 생성할 객체의 종류를 명시하고,
이렇게 만든 견본을 복사해서 새로운 객체를 생성합니다.
활용성
1) 제품의 생성, 복합, 표현 방법에 독립적인 제품을 만들고자 할 때
2) 제품 클래스 계통과 병렬적으로 만드는 팩토리 클래스를 피하고 싶을 때
3) 클래스로 꼭 정의 할 필요없는 경우, 클래스의 수를 줄이고 싶을 때
구조 및 구현
interface Prototype {
clone(): Prototype
}
class ConcretePrototype implements Prototype {
private state = 0
constructor(origin?: ConcretePrototype) {
if (origin) {
this.state = origin.state
}
}
clone() {
return new ConcretePrototype(this)
}
addState (state: number) {
this.state += state
}
log() {
console.log(this.state)
}
}
class Main {
constructor() {
const product1 = new ConcretePrototype()
product1.log() // 0
const product2 = product1.clone()
product2.addState(10)
product2.log() // 10
const product3 = product2.clone()
product3.addState(10)
product3.log() // 20
}
}
공식 기술블로그 링크
더넥스트웹리서치랩
웹 클라이언트 기술을 전문적으로 연구하고 자료를 발행하는 기술 블로그를 운영합니다.
the-next-web-research-lab.github.io
728x90
'프런트엔드 > 디자인 패턴' 카테고리의 다른 글
[0일차] 구조 패턴 7일만에 끝내기 챌린지 - GoF 디자인 패턴 (0) | 2023.07.16 |
---|---|
[5일차] 싱글턴 | 생성 패턴 5일만에 끝내기 챌린지 - GoF 디자인 패턴 (0) | 2023.07.16 |
[3일차] 팩토리 메서드 | 생성 패턴 5일만에 끝내기 챌린지 - GoF 디자인 패턴 (0) | 2023.07.16 |
[2일차] 빌더 | 생성 패턴 5일만에 끝내기 챌린지 - GoF 디자인 패턴 (0) | 2023.07.16 |
[1일차] 추상 팩토리 | 생성 패턴 5일만에 끝내기 챌린지 - GoF 디자인 패턴 (0) | 2023.07.16 |