原型继承是低代码前端引擎中构建“配置→行为→dom”映射关系的底层逻辑骨架，通过原型链动态解析配置、按需映射到dom，并支持多渲染态语义一致与行为分离。
原型继承在低代码前端引擎中，不是用来写 class 或 extends 的语法糖，而是构建“配置 → 行为 → DOM”映射关系的底层逻辑骨架。核心在于：组件配置项不直接绑定到 DOM 属性，而是通过原型链逐级查找、动态解析、按需映射，让同一份配置能在不同渲染上下文（如画布编辑态、运行态、预览态）中生成语义一致但行为分离的 DOM。
配置项按原型层级自动归位
每个可视化组件（如 Button、Chart）在初始化时，并不把所有 props 立即写死到实例上，而是将其配置对象挂载为实例属性（如 this.$config），同时将该实例的 __proto__ 指向一个由组件类型定义的原型对象。这个原型对象预先声明了三类映射规则：
- 标准 DOM 映射字段：如 text → innerText、disabled → disabled、width → style.width，定义在 BaseComponent.prototype.domMap 中；
- 平台特定映射字段：如 UIOTOS 中的 display → dataset.display、keyURL → data-keyurl，定义在平台扩展原型上；
- 运行时计算字段：如 scale → computedStyle.transform，其值依赖父容器尺寸，通过 get scale() { return this.$parent?.getScale() ?? 1; } 实现向上委托。
DOM 属性生成走“查找+适配”双阶段
当引擎调用 render() 生成真实 DOM 节点时，不遍历全部 config 键，而是：
- 第一阶段：根据当前组件原型链，收集所有 domMap 声明的 key（含继承自 BaseComponent 和当前组件原型的）；
- 第二阶段：对每个 key，沿原型链查找 this.$config[key] → this.$config.parent[key] → default[key]，找到第一个非 undefined 值；
- 再经适配器函数处理（如 px 单位补全、布尔转属性存在性、枚举转 CSS 类名），最终 setAttribute 或 style.setProperty。
例如 Button 组件未配置 width，但其原型继承了 Container.prototype.domMap.width = 'style.width'，且 Container 原型定义了 default.width = 'auto'，则最终 DOM 上不会出现 style.width，保持浏览器默认行为。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
编辑态与运行态共享原型，隔离实现细节
低代码引擎通常需同时支持画布拖拽编辑（含高亮、连线、实时预览）和纯运行态渲染。两者 DOM 结构常不同（如编辑态加 wrapper div 和操作浮层），但配置语义必须一致。做法是：
- 共用同一套原型链定义（BaseComponent → Button → EditableButton / RuntimeButton）；
- EditableView 和 RuntimeView 分别作为两个子原型，只重写 render() 和 mount()，不改动 domMap 或 $config 解析逻辑；
- 编辑态组件实例的 __proto__ 指向 EditableButton.prototype，运行态指向 RuntimeButton.prototype，但两者都可正确读取 this.$config.text 并映射到对应 DOM 节点的 innerText。
避免硬编码映射，靠原型委托解耦更新
当用户在属性面板修改 color，引擎不直接 this.$el.style.color = value，而是触发 this.set('color', value)。该方法由原型链提供：
- BaseComponent.prototype.set(key, val) 负责触发变更通知和校验；
- Button.prototype.set 覆盖 color 字段，将其转换为 CSS 变量 --btn-color，并广播 update:color 事件；
- 最终由 runtime 渲染器监听事件，执行 this.$el.style.setProperty('--btn-color', val)，或由编辑器高亮响应区域。
这样，DOM 更新逻辑完全从配置模型剥离，组件只需声明“我支持 color”，无需知道它最终落在 style、class 还是 dataset 上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
