关键在于用原型继承统一命令接口与栈逻辑：command基类原型共享execute/undo/redo，子类仅覆盖必要行为；undoredomanager原型封装栈操作，命令实例轻量且状态外置，支持object.create动态扩展。
用原型继承实现富文本编辑器的撤销重做栈，关键不是“复制状态”，而是让每个操作命令具备统一接口和可复用行为。核心是把“做什么”和“怎么撤”封装进对象，再靠原型链共享通用逻辑，避免重复写 undo/redo。
定义命令基类并利用原型共享通用方法
创建一个 Command 构造函数，所有具体操作（如插入文字、加粗、删除）都继承它。它的原型上挂载默认的 execute、undo、redo 方法，子类只需覆盖必要部分。
- execute 负责执行操作，并自动保存执行前的状态（比如 innerHTML 和光标位置）
- undo 调用子类实现的还原逻辑，比如恢复 HTML、重置选区
- redo 默认复用 execute，保持语义一致
这样，新增一种格式操作时，只需 new BoldCommand(editor)，不用重复写栈管理或状态快照逻辑。
用原型链统一管理栈行为，避免实例冗余
撤销重做栈本身也可以用构造函数 + 原型方式组织。比如 UndoRedoManager 不在每个实例里重复定义 push/pop 方法，而是：
- 构造函数只初始化 undoStack、redoStack、maxSteps 等数据属性
- 所有操作方法（execute、undo、redo、canUndo、canRedo）都放在 UndoRedoManager.prototype 上
- 多个编辑器实例可共用同一套栈逻辑，仅数据隔离
例如调用 manager.undo() 时，内部自动从 this.undoStack 弹出命令并执行其 undo 方法——这个命令本身又靠自己的原型链保证行为正确。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
命令实例轻量，状态外置更可控
不把完整 DOM 快照塞进每个命令实例里，而是让命令只存关键差异信息（如插入位置、文本内容、节点 ID），真正需要还原时，由 editor 实例提供上下文来重建状态。
- InsertTextCommand 只记 offset 和 text，还原时调用 editor.insertAt(offset, text)
- FormatCommand 只记 range 和 style，还原时调用 editor.applyStyle(range, style)
- 状态快照由 manager 在 execute 后统一采集并缓存，命令只负责“怎么变”和“怎么反”
这样命令体积小、创建快，也便于做合并（比如连续输入自动聚合成一个 InsertCommand）。
结合 Object.create 实现灵活继承与扩展
当需要定制某类命令的行为（比如中文输入需等待 compositionend 再提交），可以基于基类原型创建新原型：
- const ChineseInsertCommand = Object.create(Command.prototype)
- 覆盖其中的 execute，加入输入法判断逻辑
- 仍保留父级的 undo/redo 接口，不影响栈调度
这种方式比 class 继承更贴近原型本质，也更适合运行时动态增强命令能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
