原型式继承构建组件系统,核心是组件实例只存差异配置、通用能力统一放在原型上;通过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)),避免把原型属性误导出
这样设计出来的组件模型轻量、可扩展、易维护,也天然适配低代码平台的元数据驱动机制。











