原型继承模式通过object.create构建干净原型链,基类定义通用行为与分层配置,子类按需定制并显式合并,支持运行时动态切换原型实现主题、权限等变更。

原型继承模式在纯原生 JS 中构建组件化基础骨架,核心不是“复制父类一切”,而是“结构化共享 + 按需定制”。它让通用能力下沉到原型链上,差异逻辑由子类声明,避免重复造轮子,也防止配置污染。
用 Object.create 建立干净、可预测的原型链
不使用 Child.prototype = new Parent(),因为会执行父构造函数,可能触发副作用(如初始化 DOM、发起请求);改用 Object.create(Parent.prototype),只继承方法和默认配置,不运行初始化逻辑。
- 基类只定义通用行为:比如
render()的骨架、update(config)的合并策略、destroy()的清理入口 - 子类构造函数中调用
Parent.call(this, config)继承实例属性,再单独设置自身特有字段 - 立即修正 constructor:
Child.prototype.constructor = Child,避免 instanceof 判断或调试时出错
把配置分层挂载到原型上,实现“写一次、多处生效”
组件配置不是全量深拷贝进每个实例,而是按语义分三级挂到原型链:
-
全局不变项(如
theme: 'dark'、responsive: true)——放基类原型,所有子类自动继承 -
可选覆盖项(如
tooltip.formatter、animation.duration)——基类提供默认函数或对象,子类直接重赋值即可覆盖 -
强制重写项(如
initData()、drawChart())——基类抛错或留空,子类必须实现,否则运行时报明确提示
预留钩子 + 显式合并,让扩展不破坏原有流程
基类不封装死逻辑,而是暴露关键节点供子类介入:
- 在
render()内部调用this.beforeRender()和this.afterRender(),子类选择性实现 -
update(config)使用Object.assign({}, this.defaultConfig, config)合并,不修改原始配置对象 - 数据处理统一走
normalizeData(raw),基类提供通用转换(如时间戳转 Date),子类可重写以适配特殊格式
配合实例属性最小化,支持运行时动态切换
实例本身只存真正差异化的内容(如 id、当前筛选条件),其余都靠原型链查找:
- 创建实例时:
const chart = Object.create(BarChart.prototype); chart.id = 'sales-2024'; - 主题切换时:
Object.setPrototypeOf(chart, DarkThemeChart.prototype),无需重建 DOM 或重拉数据 - 权限降级渲染:临时替换原型指向
ReadOnlyChart.prototype,禁用交互但保留展示逻辑











