原型链通过委托查找与共享默认配置支撑可伸缩ui组件树:节点仅存差异配置,共性挂原型;多级原型链表达类型继承;运行时改原型实现热更新;插槽与组合式逻辑解耦渲染与行为。

原型链本身不直接构建“可伸缩的 UI 组件树”,但它的委托查找机制、轻量实例+共享默认配置的思想,能高效支撑树形结构的按需继承、动态更新与层级复用。关键不是把组件写成 class A extends B,而是让每个节点实例只存差异,共性逻辑和默认值挂在其原型上——这样整棵树天然具备伸缩性:增删节点不影响已有配置,改一处默认值,所有未覆盖的子节点实时响应。
让每个组件节点只保留个性化配置
树中每个节点(如 TreeItem、MenuItem、ConfigNode)不应携带全部属性,而应仅保存它自己特有的部分。比如:
- 通用字段(disabled、visible、theme)统一定义在 sharedProto 对象里
- 节点实例通过 Object.create(sharedProto) 创建,自身只设 label、key、children
- 读取
node.disabled时自动沿原型链向上找,未覆盖就用默认值
用多级原型链表达树形继承关系
当组件类型存在层级语义(如 BaseNode → FolderNode → ProjectFolderNode),可逐层构造原型链:
- 先有 baseNodeProto(含 icon: 'folder', draggable: true)
- 再用 Object.create(baseNodeProto) 得到 projectFolderProto,覆盖 icon: 'project' 和 isRoot: true
- 每个具体项目节点都基于 projectFolderProto 创建,只补充 name 和 id
- 查找顺序为:实例 → projectFolderProto → baseNodeProto,天然匹配树的父子委托语义
运行时修改原型,实现全局配置热更新
因为节点不拷贝默认值,而是实时委托查找,所以修改原型上的字段会立即反映在所有未覆盖该字段的后代节点上:
- 切换深色主题?只需 sharedProto.theme = 'dark',整棵树的未指定 theme 的节点立刻生效
- 租户级禁用某类操作?设 baseNodeProto.disabled = true,所有基础节点及其子类自动灰显
- 已手动设置
node.disabled = false的节点不受影响,保障定制优先级
配合插槽与组合式逻辑,避免继承污染
原型链管配置继承,UI 渲染和交互逻辑则交给更现代的模式:
- 用 slot 或 children 处理内容投影,不靠继承扩展模板
- 把展开/折叠、拖拽排序、键盘导航等能力抽成 useToggle、useDraggable 等组合函数,节点按需引入
- 节点实例本身保持纯净数据对象,渲染由独立的 TreeItem 组件负责,解耦关注点











