JavaScript의 프로토타입 디자인 패턴은 처음부터 객체를 생성하는 대신 기존 객체("프로토타입")를 복제하여 새 객체를 생성할 수 있는 생성 패턴입니다. 프로토타입. 이 패턴은 JavaScript 자체가 프로토타입 기반 언어이고 객체 생성 비용이 많이 들거나 기본 프로토타입과 특정 속성을 공유하는 객체를 생성하려는 경우에 유용하므로 JavaScript에 특히 적합합니다.

ES6 클래스를 사용하면 객체의 구조를 더 쉽게 이해할 수 있습니다. 확장을 사용하면 상속이 단순화되지만 ES6 이전에는 프로토타입을 사용하여 이를 상속하고 구현했습니다. 이 개념을 이해하기 위한 블로그가 있습니다.

Ps: JavaScript의 프로토타입 디자인 패턴에는 다른 언어(예: Java)에 있는 것처럼 내장 clone() 메서드가 없습니다. 그러나 프로토타입이나 생성자 함수에서 clone() 메서드를 수동으로 구현하여 유사한 기능을 제공할 수 있습니다.

프로토타입 패턴의 기본 아이디어는 다음과 같습니다.

1. 프로토타입(청사진) 역할을 하는 개체를 만듭니다.
2. 해당 개체를 사용하여 복사하거나 새 인스턴스를 프로토타입에 연결하여 새 인스턴스를 만듭니다.

프로토타입 패턴의 주요 개념

프로토타입: 새 개체가 생성되는 템플릿 개체입니다.
복제: 프로토타입을 복사하여 새로운 객체를 생성합니다.
프로토타입 체인: 객체는 프로토타입에 동작을 위임할 수 있습니다

1부: 기본 모양 클래스

class Shape {
  constructor(type = 'Generic Shape', color = 'White') {
    this.type = type;
    this.color = color;
  }

  getDetails() {
    return `Type: ${this.type}, Color: ${this.color}`;
  }

  // Clone method to create a new object with the same prototype
  clone() {
    return Object.create(this);  // Creates a new object that inherits from this prototype
  }
}

설명:

목적: Shape 클래스는 원이나 직사각형과 같은 특정 모양이 상속될 수 있는 기본 클래스 또는 "프로토타입" 역할을 합니다.

clone() 메서드: 이는 프로토타입 패턴의 핵심 부분입니다. 클래스의 새 인스턴스를 처음부터 만드는 대신 기존 인스턴스(또는 "프로토타입")의 복제본을 만듭니다. 이 경우 Object.create(this)는 원래 Shape와 동일한 프로토타입을 공유하는 새 객체를 생성합니다.

2부: 서클 클래스

class Circle extends Shape {
  constructor(radius = 0, color = 'White') {
    super('Circle', color); // Calls the parent (Shape) constructor
    this.radius = radius;
  }

  getArea() {
    return Math.PI * this.radius * this.radius;
  }
}

설명:
목적: Circle 클래스는 Shape 클래스를 확장하고 특정 유형의 모양을 나타냅니다.

속성:

• radius: 원의 반경입니다.
• 생성자에서 super() 함수는 모양 클래스, 모양 유형 및 색상으로 "원"을 전달합니다.

getArea() 메서드: π * 반경^2 공식을 사용하여 원의 면적을 계산합니다.

3부: 직사각형 클래스

class Rectangle extends Shape {
  constructor(width = 0, height = 0, color = 'White') {
    super('Rectangle', color);  // Calls the parent (Shape) constructor
    this.width = width;
    this.height = height;
  }

  getArea() {
    return this.width * this.height;
  }
}

설명:

목적: Rectangle 클래스는 Shape 클래스를 확장하고 또 다른 특정 유형의 모양(사각형)을 나타냅니다.

• Circle 클래스와 마찬가지로 Rectangle 클래스는 super()를 사용하여 상위 클래스 Shape 생성자를 호출하고 이것이 "Rectangle"임을 지정합니다.
• getArea() 메서드: 너비 * 높이
공식을 사용하여 직사각형의 면적을 계산합니다.

4부: 프로토타입 복제 및 사용

const circlePrototype = new Circle();  // Create prototype
const myCircle = circlePrototype.clone();  // Clone the prototype
myCircle.radius = 5;
myCircle.color = 'Red';

const rectanglePrototype = new Rectangle();  // Create prototype
const myRectangle = rectanglePrototype.clone();  // Clone the prototype
myRectangle.width = 10;
myRectangle.height = 5;
myRectangle.color = 'Blue';

설명:

여기에서는 new 키워드를 사용하여 처음부터 myCircle 및 myRectangle 객체를 생성하는 대신 프로토타입을 복제합니다.

복제 프로세스:

• 먼저 프로토타입 인스턴스(circlePrototype 및 직사각형Prototype)를 생성합니다.
• 그런 다음 프로토타입 객체에서 상속되는 새 객체를 생성하는 clone() 메서드를 사용하여 이러한 프로토타입을 복제합니다.

복제된 인스턴스 수정:

• 복제 후 필요에 맞게 복제된 개체(myCircle 및 myRectangle)의 속성(예: 반경, 너비, 높이, 색상)을 수정합니다.
• 이를 통해 필요한 속성만 수정하여 기본 프로토타입에서 여러 객체를 쉽게 생성할 수 있습니다.

파트 5: 출력

console.log(myCircle.getDetails()); // Output: Type: Circle, Color: Red
console.log(`Circle Area: ${myCircle.getArea()}`);  // Output: Circle Area: 78.54

console.log(myRectangle.getDetails()); // Output: Type: Rectangle, Color: Blue
console.log(`Rectangle Area: ${myRectangle.getArea()}`);  // Output: Rectangle Area: 50

설명:

• Shape 클래스에서 상속된 getDetails() 메서드를 사용하여 myCircle 및 myRectangle의 세부 정보(유형 및 색상)를 인쇄합니다.
• 또한 getArea() 메소드(Circle 및 Rectangle 클래스에만 해당)를 사용하여 각 도형의 면적을 계산하고 표시합니다.

프로토타입 디자인 패턴 관점:

• 프로토타입 생성: Circle 및 Rectangle의 새 객체를 처음부터 생성하는 대신 먼저 프로토타입 인스턴스(circlePrototype 및 직사각형Prototype)를 생성합니다.
• 복제: 프로토타입이 존재하면 clone() 메서드를 사용하여 프로토타입을 기반으로 새 객체를 생성합니다. 기존 객체(프로토타입)를 복사하여 객체를 생성하는 것이 프로토타입 패턴의 핵심입니다.

사용 사례:

프로토타입 패턴은 다음과 같은 경우에 유용합니다.

• 기존 개체를 복제하여 새 개체를 만들어야 합니다.
• 하위 클래스화를 피하고 기존 객체를 청사진으로 직접 재사용하고 싶습니다.
• 생성은 비용이 많이 들고 복잡하며 유사한 객체를 많이 생성해야 하는 경우입니다. 프로토타입을 사용하면 프로세스를 간소화하고 효율성을 높일 수 있습니다.

여기까지 오셨다면 ?✨ 질문이나 생각이 있으시면 아래에 댓글을 남겨주세요. 여러분의 의견을 듣고 좋은 토론에 참여하고 싶습니다!✨