扩展 HTMLElement 接口时是否从 Element 继承？

Question

JS 借鉴了其他语言的类、接口和对象的模型，但有自己的做事风格。

Mozilla documentation正在调用HTMLElement接口。 in继承自Element，依次是一个类。这在 Java 中行不通。

class ContentCardExample extends HTMLElement {

我找到 this example 的 javascript，它确实扩展了接口。在 Java 中，将实现一个接口。这给我带来了很多问题。

1.) 当我扩展 HTMLElement 时，我是否继承了 Element 的方法，或者它们丢失了？

2.) 如果是这样，HTMLElement 是一个类，接口的措辞只是不准确吗？

3.) HTMLElement 是否添加了可以使用的新方法，或者它是否强制我实现 Java 接口意义上的方法？

这个问题与this other question有关，它用原型、思想来表达问题。至少在语法上这不是同一个问题。

Answer 1

1.) 当我扩展 HTMLElement 时，我是从 Element 继承方法还是它们丢失了？

您的新子类通过原型链继承了它们。

2.) 如果是这样，HTMLElement 是一个类，接口的措辞只是不准确吗？

这不是不准确的，它是一个文档/规范概念。您在运行时拥有的是主机环境（在本例中为浏览器的 DOM 实现）提供的该接口的具体实现。

3.) HTMLElement 是否添加了可以使用的新方法，或者它是否强制我实现 Java 接口意义上的方法？

这些方法也是通过原型链提供的。比如click是HTMLElement添加的方法（在Element上不存在）。可以看到一个子类继承了它：

// `click` isn't part of `Element`
console.log("click" in Element.prototype);      // false

// It's provided by `HTMLElement`
console.log("click" in HTMLElement.prototype);  // true

// If we define our own element type extending `HTMLElement`...
class MyElement extends HTMLElement {
}
customElements.define("my-element", MyElement);
// ...and create an instance of it...
const x = document.createElement("my-element");
// ...our custom element instance inherits from `HTMLElement`:
console.log(x instanceof HTMLElement);          // true
// ...and via that from `Element`:
console.log(x instanceof MyElement);            // true
// ...and so it has `click`:
console.log(typeof x.click);                    // "function"