原型链提供轻量、可共享、可动态更新的交互机制,使多个实例复用同一行为并保持独立状态;通用方法挂原型、状态由实例管理;支持继承式行为分层与运行时热更新;组合函数解耦交互逻辑。

原型链本身不直接“构建”交互逻辑,而是提供一种轻量、可共享、可动态更新的机制,让多个组件实例复用同一套行为,同时保留各自的独立状态。
把通用交互方法挂到原型上,实例只管状态
构造函数负责初始化数据和绑定事件,而点击、拖拽、校验、展开/收起等操作逻辑统一放在原型对象里。这样所有实例共享函数引用,不重复创建,内存更省。
- 比如一个 ToggleableItem 构造函数只设置
this.expanded = false和this.id - 它的原型上定义
toggle()、expand()、collapse()方法 - 100 个列表项实例,共用同一份方法,各自维护自己的
expanded值
用原型链表达行为层级,避免重复实现
当交互逻辑存在继承关系(如基础按钮 → 加载中按钮 → 禁用按钮),可通过多级原型链自然承接共性与差异。
-
BaseButtonProto提供clickHandler和emit('click') -
LoadingButtonProto = Object.create(BaseButtonProto)覆盖clickHandler,增加 loading 状态管理 - 具体按钮实例基于
LoadingButtonProto创建,仅补充apiUrl或successMsg - 调用
btn.clickHandler()时,自动沿链查找:实例 → LoadingButtonProto → BaseButtonProto
运行时改原型,实现交互逻辑热更新
因为方法不在实例上,而是在原型上查找,所以修改原型上的函数,所有未覆盖该方法的实例立即生效。
- 全局禁用所有按钮点击?设
BaseButtonProto.clickHandler = () => {} - 临时开启调试日志?在
BaseButtonProto.clickHandler开头加console.log - 某个子类已重写该方法,则不受影响,保障定制优先级
组合式交互逻辑 + 原型委托,解耦更干净
原型链专注“如何响应”,不负责“如何渲染”或“如何联动”。复杂行为拆成独立组合函数,按需挂载。
- 用
useDraggable(node)返回拖拽相关方法,挂到实例上或通过原型委托调用 - 用
useKeyboardNav(node)处理方向键逻辑,节点只需声明支持导航,行为由组合函数提供 - 原型上只留
handleKeyDown(e)入口,内部转发给对应组合模块

















