原型继承构建动态组件模型的核心是组件实例仅存储差异化配置,共性配置统一置于原型链上;通过object.create()创建实例并支持多级继承,运行时修改原型属性可实时生效于未覆盖该字段的所有实例,兼顾复用性与灵活性。

直接用原型继承构建动态组件模型,核心是让组件实例只存差异,共性配置统一放在原型上——这样改一处默认值,所有未覆盖的实例立刻生效,不用逐个复制或重刷。
把通用配置设为原型对象
先定义一个干净的默认配置对象,不带 constructor,不挂方法,纯数据字段。比如表单控件的通用属性:
- required:默认 true
- disabled:默认 false
- placeholder:默认 '请输入'
- maxLength:默认 100
然后用 Object.create(defaultConfig) 创建每个具体组件实例。实例自身只设置 label、fieldName 等个性化字段,其他都自动从原型链获取。
支持多级继承的原型链组织
当组件类型有层级关系时(如基础输入框 → 用户名输入框 → 管理员邮箱输入框),可逐级创建原型链:
- 基于基础配置创建
usernameInputProto,覆盖placeholder: '用户名(3–12位)' - 再用
Object.create(usernameInputProto)创建adminEmailInput,只设type: 'email'和label: '管理员邮箱'
查找顺序是:实例 → usernameInputProto → 基础配置。这样既复用又可精准控制每层的覆盖粒度。
运行时动态更新默认值
因为是原型链查找,不是属性拷贝,所以修改原型上的值会实时影响所有未覆盖该字段的实例:
- 修改
defaultConfig.placeholder = '请填写' - 所有没设自身
placeholder的组件,下次读取时立即返回新值 - 已有自身值的组件不受影响,保持差异化
这对低代码平台中全局主题切换、租户级配置下发等场景非常实用。
避免污染原型与实例混淆
关键细节要守住:
- 原型对象只放数据,不放方法或 this 相关逻辑,防止执行上下文错乱
- 用
Object.getOwnPropertyNames(instance)可清晰区分哪些是实例自有属性 - 序列化前建议用
JSON.stringify(Object.assign({}, instance)),避免把原型属性误导出
这样设计出来的组件模型轻量、可扩展、易维护,也天然适配低代码平台的元数据驱动机制。










