原型设计模式

定义

• 一种创建对象的设计模式，它允许通过复制现有对象来生成新对象，而无需依赖具体类的构造函数。
• 在该模式中，一个原型对象作为基础，当需要创建新对象时，通过复制该原型对象并进行适当的修改来生成新的对象实例。

核心概念

• 在原型设计模式中，核心概念是原型对象和克隆方法。
• 原型对象是要被复制的对象，它必须实现一个克隆方法，该方法能够返回一个与自身相似的新对象。
• 通过调用克隆方法，可以生成一个新的对象，并根据需要进一步的修改。

关于拷贝

原型设计模式可以通过浅拷贝或深拷贝来实现对象的复制。

• 浅拷贝只复制对象的基本属性值，而对于引用类型的属性，则仍然是共享的。
• 深拷贝则会递归地复制所有对象及其引用的对象，从而完全独立地创建一个新的对象。

示例

// 定义原型对象接口
interface Prototype {
  // 原型对象必须实现一个clone方法，用来返回一个与自身相似的新对象
  // 注意clone方法的返回值的类型是Prototype
  clone(): Prototype;
}

// 具体的原型对象实现类
class ConcretePrototype implements Prototype {
  // 私有属性，复制之后的对象应该和元对象具有相同的私有属性
  private property: string;

  constructor(property: string) {
    this.property = property;
  }

  public clone(): Prototype {
    // 创建一个新的对象并复制当前对象的属性值
    const clonedObj = new ConcretePrototype(this.property);
    return clonedObj;
  }

  public getProperty(): string {
    return this.property;
  }
}

// 使用原型对象的客户端代码
const originalObj = new ConcretePrototype("Original Property");

// 克隆对象
const clonedObj = originalObj.clone();
// 克隆对象的应该和源对象具有相同的属性
console.log(originalObj.getProperty());  // 输出：Original Property
console.log(clonedObj.getProperty());    // 输出：Original Property

// 在克隆之后，可以对细节进行修改
originalObj.property = "Modified Property";
console.log(originalObj.getProperty());  // 输出：Modified Property
console.log(clonedObj.getProperty());    // 输出：Original Property

应用场景

• 当一个对象的创建过程很昂贵或复杂时，可以使用原型模式来避免重复执行这些过程。
• 当需要创建多个相似对象时，可以使用原型模式来节省时间和资源。
• 当一个对象需要有多个可变状态组合时，可以使用原型模式来方便地生成不同状态的对象。

1. 原型链：JavaScript 中的每个对象都有一个原型（prototype）属性，它指向另一个对象。通过原型链，在查找对象的属性和方法时，可以逐级向上访问原型对象，实现属性和方法的继承关系。
2. Object.create() 方法：该方法可以用于创建一个新对象，并将一个现有对象设置为新对象的原型。这样，新对象就可以继承原型对象的属性和方法。
3. DOM 操作：在浏览器环境中，通过 DOM 操作创建、复制或修改元素是常见的使用原型模式的例子。例如，可以使用 cloneNode() 方法来克隆一个 DOM 元素节点，从而生成具有相同属性和子节点的新元素。