TypeScript设计模式：原型模式

RoyLin2025-09-17 15:14

原型模式（Prototype Pattern）是一种创建型设计模式，通过复制已有对象（原型）来创建新对象，而无需依赖具体的类。这种模式特别适合需要创建大量相似对象或对象创建成本较高的场景。TypeScript 的类型系统与原型模式结合，可以确保复制的对象符合预期接口，同时保持代码的类型安全。

什么是原型模式？

原型模式的核心是通过克隆现有对象来生成新对象，而不是通过构造函数实例化。原型对象作为一个模板，新对象通过复制其属性和方法创建。这种方式可以：

  • 提高性能：避免重复执行复杂的初始化逻辑。
  • 动态性：支持运行时动态创建对象。
  • 简化创建：无需为每种对象定义单独的类。

在 TypeScript 中，原型模式通过实现克隆方法（通常命名为 clone）并利用接口确保类型一致性来实现。

JavaScript 原型与原型链

原型模式得名于 JavaScript 的原型机制，因此理解 JavaScript 的原型和原型链对掌握该模式至关重要。

  • 原型（Prototype） ：在 JavaScript 中，每个对象都有一个关联的原型对象（通过 [[Prototype]] 内部属性访问，可通过 __proto__ 或 Object.getPrototypeOf 获取）。对象可以从其原型继承属性和方法。构造函数的 prototype 属性定义了其实例的共享原型。例如：

    javascript 复制代码 
    function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  return `Hello, ${this.name}`;
};
const p = new Person('Alice');
console.log(p.greet()); // 输出: Hello, Alice
console.log(Object.getPrototypeOf(p) === Person.prototype); // 输出: true

    这里，p 继承了 Person.prototype 上的 greet 方法。

  • 原型链（Prototype Chain） ：当访问对象属性时，JavaScript 首先检查对象自身，若未找到，则沿着 [[Prototype]] 查找其原型，依次向上，直到到达 Object.prototype 或 null，形成原型链。例如：

    javascript 复制代码 
    const obj = {};
console.log(obj.toString()); // 输出: [object Object]
// toString 来自 Object.prototype
console.log(Object.getPrototypeOf(obj) === Object.prototype); // 输出: true

    原型链是 JavaScript 继承的基础，允许动态共享和扩展行为。

  • 与原型模式的关系 ：原型模式受 JavaScript 原型机制启发，但更侧重于"复制对象"而非"继承"。在原型模式中，clone 方法通常实现深拷贝或浅拷贝，生成独立对象，而非依赖原型链共享属性。TypeScript 通过接口和类型系统增强了原型模式的类型安全，确保克隆对象符合预期结构，弥补了 JavaScript 原生原型机制的动态性和潜在风险（如意外修改共享原型）。

理解 JavaScript 原型机制有助于实现高效的克隆逻辑，尤其在处理复杂对象（如嵌套结构）时需注意深拷贝问题。

原型模式的结构

原型模式通常包含以下几个角色：

  1. Prototype（原型接口）：声明克隆方法的接口，通常包含一个 clone 方法。
  2. ConcretePrototype（具体原型）：实现原型接口，提供具体的克隆逻辑。
  3. Client（客户端）：使用原型对象，通过调用 clone 方法创建新对象。

优点

  • 性能优化：通过复制现有对象，减少复杂对象初始化的开销。
  • 灵活性：支持运行时动态创建对象，适合动态配置场景。
  • 类型安全：TypeScript 的类型系统确保克隆对象符合预期接口。
  • 简化代码：减少对具体类的依赖，降低系统耦合度。

适用场景

  • 当对象的创建过程复杂或耗时较长（如涉及数据库查询或复杂计算）。
  • 需要创建大量相似对象，但部分属性或状态不同。
  • 需要在运行时动态复制对象（如 UI 组件克隆、游戏对象的生成）。
  • 希望避免繁琐的子类化来创建对象。

简单的模拟代码介绍

以下是一个简单的 TypeScript 示例，模拟一个 UI 组件的原型模式。我们定义一个组件接口和具体组件，通过克隆方法创建新组件，并允许修改部分属性。

typescript 复制代码 
// 原型接口
interface Component {
  clone(): Component;
  render(): string;
  setStyle(style: string): void;
}

// 具体原型：按钮组件
class ButtonComponent implements Component {
  private style: string;
  private label: string;

  constructor(label: string, style: string = 'default') {
    this.label = label;
    this.style = style;
  }

  setStyle(style: string): void {
    this.style = style;
  }

  clone(): Component {
    return new ButtonComponent(this.label, this.style);
  }

  render(): string {
    return `Button: ${this.label} (Style: ${this.style})`;
  }
}

// 客户端代码
function main() {
  // 创建原型按钮
  const prototypeButton = new ButtonComponent('Click Me', 'primary');

  // 克隆并修改
  const button1 = prototypeButton.clone();
  button1.setStyle('success');

  const button2 = prototypeButton.clone();
  button2.setStyle('danger');

  // 输出结果
  console.log('Original:', prototypeButton.render());
  console.log('Button 1:', button1.render());
  console.log('Button 2:', button2.render());
}

main();

运行结果

运行以上代码，将输出：

vbnet 复制代码 
Original: Button: Click Me (Style: primary)
Button 1: Button: Click Me (Style: success)
Button 2: Button: Click Me (Style: danger)

这个示例展示了原型模式的核心：通过 clone 方法复制按钮组件，生成具有相同标签但不同样式的按钮，减少了重复初始化的开销。

工作流引擎节点的实际应用示例

在工作流引擎管理中，原型模式常用于动态生成工作流节点（如任务执行器或决策节点），以支持高效的复制和自定义。以下是一个 TypeScript 示例，模拟一个工作流节点管理器，支持克隆节点并修改其属性（如处理器函数或输入参数）。我们假设节点包含执行逻辑和配置，使用深拷贝确保克隆对象独立，避免共享状态问题。

实现示例

定义节点接口和原型类，使用 TypeScript 实现克隆逻辑。

typescript 复制代码 
// 原型接口
interface WorkflowNode {
  clone(): WorkflowNode;
  execute(input: any): Promise<any>;
  setProcessor(processor: (input: any) => Promise<any>): void;
  getConfig(): Record<string, any>;
}

// 具体原型：工作流任务节点
class TaskNodeImpl implements WorkflowNode {
  private processor: (input: any) => Promise<any>;
  private config: Record<string, any>;

  constructor(processor: (input: any) => Promise<any>, config: Record<string, any> = {}) {
    this.processor = processor;
    this.config = { ...config };
  }

  clone(): WorkflowNode {
    // 深拷贝 config，处理器函数引用（假设无状态）
    const cloned = new TaskNodeImpl(this.processor, { ...this.config });
    return cloned;
  }

  execute(input: any): Promise<any> {
    console.log(`Executing task with config:`, this.config);
    return this.processor(input);
  }

  setProcessor(processor: (input: any) => Promise<any>): void {
    this.processor = processor;
  }

  getConfig(): Record<string, any> {
    return { ...this.config };
  }
}

// 节点管理器：使用原型模式管理工作流节点
class WorkflowManager {
  private prototypes: Map<string, WorkflowNode> = new Map();

  // 注册原型
  registerPrototype(id: string, node: WorkflowNode): void {
    this.prototypes.set(id, node);
  }

  // 创建节点
  createNode(prototypeId: string, configUpdates: Record<string, any> = {}): WorkflowNode {
    const prototype = this.prototypes.get(prototypeId);
    if (!prototype) {
      throw new Error(`Prototype ${prototypeId} not found`);
    }
    const node = prototype.clone();
    // 应用配置更新
    Object.entries(configUpdates).forEach(([key, value]) => {
      (node as any).config[key] = value;  // 直接访问私有属性（生产中可优化为 setter）
    });
    return node;
  }
}

// 示例处理器函数
const defaultProcessor = async (input: any): Promise<any> => {
  return { result: `Processed: ${input.data}`, timestamp: new Date().toISOString() };
};

const customProcessor = async (input: any): Promise<any> => {
  return { result: `Custom: ${input.data.toUpperCase()}`, errorRate: 0.01 };
};

// 客户端代码
async function main() {
  // 创建原型节点：默认数据处理任务
  const baseNode = new TaskNodeImpl(defaultProcessor, {
    type: 'dataProcess',
    timeout: 5000,
  });

  // 初始化节点管理器
  const manager = new WorkflowManager();
  manager.registerPrototype('dataTask', baseNode);

  // 创建新节点并修改配置/处理器
  const node1 = manager.createNode('dataTask', { source: 'DB1' });
  node1.setProcessor(customProcessor);

  const node2 = manager.createNode('dataTask', { source: 'API', timeout: 10000 });

  // 执行示例
  console.log('Node 1 Execution:', await node1.execute({ data: 'hello world' }));
  console.log('Node 2 Execution:', await node2.execute({ data: 'test input' }));
  console.log('Original Config:', baseNode.getConfig());
}

main().catch(console.error);

运行与测试

  1. 准备 ：确保 TypeScript 环境已配置（npm install typescript ts-node），代码保存为 prototype.ts。
  2. 运行 ：执行 npx ts-node prototype.ts。
  3. 输出示例：
yaml 复制代码 
Executing task with config: { type: 'dataProcess', timeout: 5000, source: 'DB1' }
Node 1 Execution: { result: 'Custom: HELLO WORLD', errorRate: 0.01 }
Executing task with config: { type: 'dataProcess', timeout: 10000, source: 'API' }
Node 2 Execution: { result: 'Processed: test input', timestamp: '2025-09-17T15:47:00.000Z' }
Original Config: { type: 'dataProcess', timeout: 5000 }

代码说明

  • 原型接口 ：WorkflowNode 定义克隆和执行方法，确保异步兼容性和类型安全。
  • 具体原型 ：TaskNodeImpl 实现深拷贝逻辑，处理器函数作为引用传递（适合无状态函数）。
  • 管理器 ：WorkflowManager 管理原型并提供创建接口，支持运行时自定义，简化工作流构建。
  • 现实场景：在工作流 engines 中，原型模式适合快速生成节点链（如 ETL 管道），仅修改必要配置（如源/超时），减少 boilerplate 代码并提升性能。

总结

原型模式通过克隆现有对象提供了一种高效的对象创建方式，特别适合需要频繁创建相似对象的场景。结合 JavaScript 的原型和原型链机制，原型模式在复制对象时可灵活处理继承和动态行为。从简单的 UI 组件克隆到工作流引擎节点管理示例，展示了原型模式在动态复制和修改对象时的优势。TypeScript 的类型系统进一步增强了原型模式的可靠性，确保克隆对象符合预期接口，适用于 UI 组件、数据模型生成、工作流节点等场景。

相关推荐
我是天龙_绍2 小时前
vue Composables 组合式函数
前端
zjjuejin2 小时前
Maven项目的核心蓝图：POM文件
前端·maven
小气小憩2 小时前
“暗战”百度搜索页：Monica悬浮球被“围剿”，一场AI Agent与传统巨头的流量攻防战
前端·人工智能
前端付豪2 小时前
1、震惊！99% 前端都没搞懂的 JavaScript 类型细节
前端·javascript·面试
朝与暮2 小时前
js符号(Symbol)
前端·javascript
菜鸟谢3 小时前
Manjaro Tab 无自动补全
后端
Java水解3 小时前
JAVA经典面试题附答案(持续更新版)
java·后端·面试
恋猫de小郭3 小时前
对于普通程序员来说 AI 是什么？AI 究竟用的是什么？
前端·flutter·ai编程
Java水解3 小时前
Mysql查看执行计划、explain关键字详解（超详细）
后端·mysql
热门推荐
01GitHub 镜像站点02UV 工具安装与国内镜像源配置指南03Claude Code 平替：OpenAI发布 Codex CLI ，GPT-5 国内直接使用04UV安装并设置国内源0546个Nano-banana 精选提示词，持续更新中06保姆级教程：手把手教你用Dify实现完美多轮对话（附Chatflow和提示词）07A股预测还能更准？开源大模型Kronos带你跑通预测+回测全流程08Spec-Kit 使用指南09解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题10conda中设置镜像地址（附所有可换的地址）