JavaScript 中的接口是什么？ [复制]

Question

许多 MDN 页面将事物描述为“接口”——我很惊讶“接口”没有链接到更解释性的页面；它只是在 MDN 的 web APIs page 上被描述为“对象类型”。

Answer 1

接口描述对象的形状。 （它有什么属性，这些属性包含什么类型的值，等等。）它不是一个对象本身——它是对实现接口的特定对象的更抽象的描述。

例如，在 HTML 标准中，DragEvent interface 是这样描述的：

[Exposed=Window]
interface DragEvent : MouseEvent {
  constructor(DOMString type, optional DragEventInit eventInitDict = {});

  readonly attribute DataTransfer? dataTransfer;
};

dictionary DragEventInit : MouseEventInit {
  DataTransfer? dataTransfer = null;
};

所以DragEvent 是MouseEvent 的一种类型（这是另一个接口）。它有一个构造函数，所以你可以在window.DragEvent 上调用new。调用构造函数时，使用以下参数调用它：

• type，即DOMString（基本上就是任何纯字符串）
• DragEventInit 类型的可选参数（文档定义），默认为空对象

一个 DragEvent 实例也有一个 dataTransfer property

---

请注意，您要链接到的“接口”定义并不完全是 JavaScript 的东西，而更多的是 Web API 的东西。在浏览器之外的其他 JavaScript 实现中（例如，在 Node 中），接口可能意味着不同的东西（或根本没有）。

TypeScript 是一种广泛使用的 JavaScript 静态类型检查器，具有非常相似的接口概念，用于描述特定对象的形状。例如：

// Define the shape of a Foo object
interface Foo {
  prop: string;
}

// Create an object that implements Foo
const someFoo: Foo = {
  prop: 'somevalue'
};