Шаблон проектирования прототипа в JavaScript — это шаблон создания, который позволяет создавать новые объекты путем клонирования существующего объекта («прототипа») вместо создания их с нуля, что служит прототип. Этот шаблон особенно хорошо подходит для JavaScript, поскольку сам JavaScript является языком, основанным на прототипах, и полезен, когда создание объекта требует больших затрат или когда вы хотите создать объект, который разделяет определенные свойства с базовым прототипом.

Классы ES6 упрощают понимание структуры объектов. Использование расширений упрощает наследование, но до ES6 для наследования и реализации этого использовался прототип. Вот блог, чтобы понять эту концепцию.

Ps: В шаблоне проектирования прототипа в JavaScript нет встроенного метода clone(), как в некоторых других языках (например, Java). Однако вы можете вручную реализовать метод 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) создает новый объект, имеющий тот же прототип, что и исходная форма.

Часть 2: Класс Circle

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 и представляет определенный тип фигуры.

Атрибуты:

• радиус: радиус круга.
• В конструкторе функция super() вызывает конструктор Класс фигуры, в котором в качестве типа фигуры и цвета передается «Круг».

getArea() Метод: рассчитывает площадь круга по формуле π * радиус^2.

Часть 3: Класс Rectangle

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';

Объяснение:

Здесь вместо создания объектов myCircle и myRectangle с нуля с использованием ключевого слова new мы клонируем прототипы.

Процесс клонирования:

• Сначала мы создаем экземпляры прототипа (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

Объяснение:

• Мы используем метод getDetails(), унаследованный от класса Shape, для печати деталей (типа и цвета) myCircle и myRectangle.
• Мы также используем методы getArea() (специфичные для классов Circle и Rectangle) для вычисления и отображения площади каждой фигуры.

Перспектива шаблона проектирования прототипа:

• Создание прототипа: вместо создания новых объектов Circle и Rectangle с нуля мы сначала создаем экземпляр прототипа (circlePrototype и прямоугольникPrototype).
• Клонирование: как только прототип существует, метод clone() используется для создания новых объектов на основе прототипа. В этом суть шаблона прототипа: создание объектов путем копирования существующего объекта (прототипа).

Вариант использования:

Шаблон прототипа полезен, когда:

• Вам необходимо создавать новые объекты путем клонирования существующих объектов.
• Вы хотите избежать создания подклассов и напрямую использовать существующие объекты в качестве чертежей.
• создание является дорогостоящим или сложным, и когда необходимо создать много похожих объектов. Используя прототипы, вы можете оптимизировать процесс и повысить эффективность.

Если вы зашли так далеко ?✨, оставьте комментарий ниже с любыми вопросами или мыслями. Мне бы хотелось услышать ваше мнение и поучаствовать в интересных дискуссиях!✨