原型链虽非模块系统,但可支撑模块化——将可复用逻辑放原型、差异化配置留实例,形成轻量可继承结构;通过多级原型链组织组件层级,支持运行时动态调整默认行为,并需严格区分原型与实例职责以保障稳定性。

原型链本身不是模块系统,但它能成为模块化代码体系的底层支撑——关键在于把“可复用逻辑”放原型上,“差异化配置”留实例中,形成轻量、可继承、易更新的结构。
把通用能力集中到原型对象
不要在每个组件实例里重复定义相同行为。比如表单控件共有的校验规则、禁用状态处理、值变更通知等,统一挂载到一个基础原型对象上:
- 定义干净的原型对象:不带 constructor,不写方法体,只存默认配置项(如
required: true、debounce: 300) - 用
Object.create(baseProto)创建具体组件实例,实例自身只设label、fieldName等个性化字段 - 所有未覆盖的属性自动从原型链获取,无需手动合并或深拷贝
用多级原型链组织组件层级
当业务存在明确抽象层级时(如「基础输入框 → 手机号输入框 → 后台手机号输入框」),可逐层构建原型链:
- 第一层:基础输入原型,定义
type: 'text'、maxLength: 50 - 第二层:手机号原型,
Object.create(baseInput),覆盖pattern和placeholder - 第三层:后台专用实例,仅设置
label: '管理员手机号'和apiScope: 'admin' - 属性查找按「实例 → 手机号原型 → 基础原型」顺序进行,每层只专注自己要改的部分
运行时动态调整默认行为
因为是原型链查找而非属性拷贝,修改原型上的值会实时生效于所有未覆盖该字段的实例:
- 切换主题时,直接改
baseProto.theme = 'dark',所有没设theme的组件立刻响应 - 租户配置下发时,更新
baseProto.apiHost,下游所有接口调用自动走新地址 - 已有自身值的实例不受影响,保持定制化稳定性
避免原型与实例职责混淆
这是长期维护不出错的关键约束:
-
原型只放纯数据和无状态函数,不存
this依赖逻辑或闭包变量 - 判断属性归属:用
Object.hasOwn(instance, 'fieldName')区分是实例自有还是继承而来 - 序列化导出前做剥离:
JSON.stringify(Object.assign({}, instance)),防止把原型属性误带出去 - 不给原型对象添加非预期属性,保持其作为“模板”的纯粹性











