寄生式继承仅适用于普通JS对象，不适用于原生HTML元素增强；因其返回plain object，无法继承DOM元素的原型链、行为及可访问性语义，正确方式是使用Customized Built-in Elements（如extends: 'button'）。
寄生式继承本身不适用于对原生 HTML 元素的功能增强。
它是一种面向对象的模拟继承模式，用于在 JavaScript 中基于普通对象（而非 DOM 元素）构造新对象，核心是“封装创建 + 增强返回”，比如：
function createPerson(name) {
return { name, sayName() { console.log(this.name); } };
}
function createStudent(name, grade) {
const student = createPerson(name); // 获取基础对象
student.grade = grade; // 增强：添加属性
student.sayGrade = () => console.log(this.grade); // 增强：添加方法
return student;
}这种模式操作的是普通 JS 对象，与 DOM 元素无关。你无法用它去扩展 <button> 或 <input> 的行为，因为：
- 原生元素是浏览器内置的宿主对象（如
HTMLButtonElement），其原型链、内部状态、事件机制、可访问性语义均由浏览器控制； - 寄生式继承返回的只是 plain object，不具备
click()、focus()、form关联、disabled属性响应等 DOM 行为； - 它无法接入 DOM 生命周期（如
connectedCallback）、不参与渲染、不能被document.createElement('button')创建，更无法被表单提交或屏幕阅读器识别。
真正可行的原生元素增强方式：Customized Built-in Elements（配合 is 属性）
要安全、语义正确地增强原生元素（如让 <button is="loading-button"> 具备加载态逻辑），必须使用 Web Components 规范中的 定制化内置元素（Customized Built-in Elements）：
立即学习“前端免费学习笔记（深入）”；
✅ 正确步骤
- 定义一个类，继承对应原生元素类（如
HTMLButtonElement） - 在
customElements.define()中传入{ extends: 'button' } - 在 HTML 中用原生标签 +
is属性调用，例如<button is="loading-button">
class LoadingButton extends HTMLButtonElement {
constructor() {
super(); // 必须调用，初始化原生按钮实例
this._isLoading = false;
}
connectedCallback() {
this.addEventListener('click', this._handleClick);
}
_handleClick() {
if (this._isLoading || this.disabled) return;
this._isLoading = true;
this.disabled = true;
this.textContent = '加载中…';
// 模拟异步任务
setTimeout(() => {
this._isLoading = false;
this.disabled = false;
this.textContent = '完成';
}, 1500);
}
}
// 注册时指定 extends
customElements.define('loading-button', LoadingButton, { extends: 'button' });<!-- 正确用法：使用原生 button 标签 + is --> <button is="loading-button">点击加载</button>
⚠️ 注意：写成
<loading-button>是无效的——它会被当作HTMLElement实例，失去所有按钮特性（无type、无form、无click()原生行为、无障碍支持失效）。
为什么不能混用寄生式继承和 DOM 增强？
| 维度 | 寄生式继承 | Customized Built-in Elements |
|---|---|---|
| 对象本质 | 普通 JS 对象（Object） |
真实 DOM 元素（HTMLButtonElement） |
| 原型链 | 自定义链，与 DOM 无关 | 继承自 HTMLButtonElement → HTMLElement → Element → Node…
|
| 浏览器行为 | 无 focus/submit/form/AR 支持 | 完整保留原生语义与交互能力 |
| 属性响应 | 需手动监听、模拟（如 disabled 变化） |
原生属性自动触发 UI 和行为变化 |
| 可访问性 | 不被屏幕阅读器识别为按钮 | 被识别为 <button>，支持键盘导航与 ARIA |
替代思路（不推荐但存在）：包装而非增强
如果你坚持用“对象增强”思路，唯一合理路径是封装原生元素引用，即：
function enhanceButton(el) {
if (!(el instanceof HTMLButtonElement)) throw new Error('需传入 button 元素');
el.isLoading = false;
el.startLoading = function() {
this.isLoading = true;
this.disabled = true;
this.textContent = '加载中…';
};
return el;
}
// 使用
const btn = document.querySelector('button');
enhanceButton(btn).startLoading();但这只是给已有元素加属性/方法，不是创建新类型，也不具备复用性、封装性或声明式能力（无法用 HTML 直接写 <button is="...">），且容易污染原生原型。
本质上，寄生式继承属于早期 JavaScript 模拟类的过渡方案，已被 class、extends 和 Web Components 等标准机制取代。对 DOM 元素的功能增强，应直接采用现代浏览器原生支持的 Customized Built-in Elements 模式。
