原型設計模式

發佈於2024-11-07

Prototype Design Pattern

JavaScript 中的原型设计模式是一种创建模式，允许您通过克隆现有对象（“原型”）来创建新对象，而不是从头开始创建它们，这充当一个原型。这种模式特别适合 JavaScript，因为 JavaScript 本身是一种基于原型的语言，当对象创建成本高昂或当您想要创建与基本原型共享某些属性的对象时非常有用。

ES6 类让我们更容易理解对象的结构。使用extends简化了继承，但在ES6之前，使用prototype来继承和实现。这是理解这个概念的博客。

Ps：在 JavaScript 的原型设计模式中，没有像其他语言（例如 Java）那样的内置 clone() 方法。但是，您可以在原型或构造函数中手动实现clone()方法以提供类似的功能。

原型模式背后的想法是：

创建一个充当原型（蓝图）的对象。
通过复制该对象或将新实例链接到原型，使用该对象创建新实例。

原型模式的关键概念

原型：创建新对象的模板对象。
克隆：通过复制原型来创建新对象。
原型链：对象可以将行为委托给其原型

第 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 部分：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 类并表示特定类型的形状。

属性：

radius: 圆的半径。
构造函数中，super()函数调用了 Shape 类，传递“Circle”作为形状类型和颜色。

getArea() 方法：使用公式 π * radius^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构造函数，指定这是一个“矩形”。
getArea() 方法：使用公式 width * height

第 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

解释：