知乎专栏中写html代码,「知乎」如何理解 document 对象是 HTMLDocument 的实例？ | 大专栏...

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

谢邀。

首先要理解的是 DOM 是 API，是一组无关编程语言的接口(Interfaces)而非实现(Implementation)。前端平时常说的 DOM 其实只是浏览器通过 ECMAScript(JavaScript)对 DOM 接口的一种实现。

其次要知道的是，DOM 既是为 HTML 制定的，也是为 XML 制定的。而两者各有一些特异的部分，所以作为 DOM 标准基石的 DOM Level 1 其实分为 Core 与 HTML 两个部分。Core 定义了 fundamental interfaces 与 extended interfaces，分别是共用的基础接口与 「XML 拓展包」，而 HTML 部分则全都是「HTML 拓展包」。题主所问到的 Document 接口被定义在 Core 的 fundamental interfaces 中，而 HTMLDocument 接口则定义在 HTML 部分中，且「接口继承」于 Document。

这种继承关系当然是可以在 JavaScript 的 DOM 实现中体现出来的：

1

2

3

4

5

6

7

8

9// document 是 HTMLDocument 的实例

document instanceof HTMLDocument // true

// document 的 [[prototype]] 指向 HTMLDocument 的原型

document.__proto__ === HTMLDocument.prototype // true

// HTMLDocument 伪类继承于 Document

HTMLDocument.prototype instanceof Document // true

HTMLDocument.prototype.__proto__ === Document.prototype // true

至于 Document 与 HTMLDocument 这两个构造函数，跟 Array、Object 一样都是 built-in 的：

1

2

3

4> Document

< function Document() { [native code] }

> HTMLDocument

< function HTMLDocument() { [native code] }

虽然是 native code，但一个有意思的现象是，这两个构造函数之间也是存在原型链的：

1

2

3

4

5

6// HTMLDocument 的 [[prototype]] 是指向 Document 的

HTMLDocument.__proto__ == Document

// 同理

Document.__proto__ == Node

Node.__proto__ == EventTarget

其作用是实现对静态成员的继承。( ES6 Class 的行为与此完全一致，但这个行为在更早之前就是这样了。)

好了扯远了，总结一下，在 JavaScript 的 DOM 实现中document 是 HTMLDocument 的实例

HTMLDocument 继承于 Document

留一个课后作业，有兴趣的话可以看看 Document.prototype 与 HTMLDocument.prototype 里分别都有什么？在不同浏览器里都试试。

以上。