在 Web 开发中，我们经常需要创建复杂的组件，并将其放置在不同的地方。 Custom Elements 是一个强大的工具，可以帮助我们实现自定义的 HTML 标签。本文将深入探讨 Custom Elements 的构造函数与继承方式，并提供详细的学习和指导意义。
构造函数的基础
对于 Custom Elements，构造函数是其中最重要的一部分。我们可以使用 customElements.define() 方法去定义自己的 Custom Element 并指定所需的构造函数。构造函数基础的结构如下：
class MyCustomElement extends HTMLElement { constructor() { super(); // ...构造函数中需要执行的操作 } }
在上述代码中，MyCustomElement 是我们自定义的元素名称，继承于 HTMLElement。构造函数中必须调用 super() 函数，以确保自定义元素被正确地初始化。自定义元素通常需要在构造函数中执行一些预设工作，例如创建子元素、添加事件监听器等操作。
继承方式
Custom Elements 还支持继承方式。我们可以在自定义元素中创建一个子类并复用父类的定义，从而节省冗余的代码。例如：
-- -------------------- ---- ------- ----- ------------- ------- ----------- - ------------- - -------- -- ------- - - ----- --------------- ------- ------------- - ------------- - -------- -- ---------- - -展开代码
在上述代码中，MyBaseElement 是一个基类，MyCustomElement 是一个继承于 MyBaseElement 的子类。在 MyCustomElement 的构造函数中必须调用 super()，以确保 MyBaseElement 中定义的预设工作也被执行。
组合和继承的选择
在构建复杂的组件时，我们通常会面临应该使用组合还是使用继承的问题。虽然组合方式是强大而灵活的，但很多情况下我们仍然想要将细节封装在类中，避免过多的代码重复。在这种情况下，继承方式是一个更好的选择。
总的来说，当我们需要进行某些通用的操作时，使用继承方式可以帮助我们减少冗余并提高代码复用性。但当我们需要一些灵活性时，组合方式则更为适合。
示例代码
以下是一个完整的 Custom Element 示例代码，其中使用了构造函数和继承方式：
-- -------------------- ---- ------- ----- ------------- ------- ----------- - ------------- - -------- ------------------- ----- ------ --- ----- -------- - ----------------------------------- ------------------ - - ------- ---------- - ----------------- ----- -------- ----- ---------- ----- - -------- ---- ------------------ ------------- ------ -- -------------------------------------------------------------- - - ----- --------------- ------- ------------- - ------------- - -------- - - ------------------------------------------ -----------------展开代码
在 MyBaseElement 中定义了一些通用的操作，添加了 Shadow DOM 和一些 CSS 样式。MyCustomElement 继承了 MyBaseElement 并没有做任何额外的预设工作，但仍然可以使用 MyBaseElement 中定义的所有功能。
最后，在调用 customElements.define() 方法时，我们将 MyCustomElement 指定为自定义元素的构造函数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cd8120e46428fe9e71416e
