JavaScript 中的 Document 和 document 有什么区别？答案

【问题标题】：What is the difference between Document and document in JavaScript?JavaScript 中的 Document 和 document 有什么区别？
【发布时间】：2014-02-14 16:10:54
【问题描述】：

我目前正在为 JavaScript 构建 API，主要使用 Visual Studio 2010 和 JetBrains WebStorm（如果您正在寻找防弹的 JavaScript IDE，那就太棒了）。

在查看 Visual Studio 中的智能感知列表时（试图让自己熟悉 JavaScript API），我注意到Document 和document 都存在。

Document 和 document 有什么区别？
document 的实例是什么（如果有）？
如何使用Document（因为它不是函数，因此不可构造）？
最重要的是，“猴子补丁”Document 使其可构造有什么危害？

这些问题背后的基本原理是我想创建一些适合我的 API 的对象（例如；Document、HTMLElement 等），但由于这些似乎在某些方面已经存在，我不相信我应该覆盖他们的原生实现。

【问题讨论】：

标签： javascript dom

【解决方案1】：

Document 和 document 有什么区别？

document（或window.document）是对包含在窗口中的文档的引用。 (spec)

Document 是文档的 DOM 接口，它暴露在全局对象上。 (spec, spec)

如何使用Document（因为它不是函数，因此不可构造）？

它是一个宿主对象，不需要遵循 EcmaScript 规范——但这并不意味着它不是一个函数。它也可能因浏览器而异。然而它并不打算被调用（如果你尝试它，你会得到一个NOT_SUPPORTED_ERR），还有其他方法可以实例化/获取新文档。您仍然可以使用它的是

> document instanceof Document
true
> Document.prototype
DocumentPrototype {
    adoptNode: Function
    constructor: Document
    createAttribute: Function
    …
    querySelector: Function
    querySelectorAll: Function
}
|- NodePrototype
|- Object

因此您可以扩展其原型并在您的应用中的所有XMLDocuments/HTMLDocuments 上使用这些方法（但前提是您知道what’s wrong with extending the DOM）。

最重要的是，“猴子补丁”Document 使其可构造有什么危害？

我不确定你会怎么做。覆盖它可能会损害每个期望它按上述方式工作的脚本（除非您修复了新函数的 prototype 属性）。也许window 的Document 属性在某些环境中是不可写的，所以你可能会伤害自己。

【讨论】：

所以基本上Document.prototype基本上类似于window.document/document?
@Jaketr00：类似的？当然。事实上，Document.prototype.isPrototypeOf(window.document) 就是true :-)

【解决方案2】：

Document 是全局范围内document 对象的原型定义，这意味着Document 的原型与他的实例共享（document）。比如Window 是window 对象的原型定义。
Document 是本机原型对象，您无法创建它的实例，在创建页面时（同样，如窗口）只创建一个实例，就像单色调对象一样。
我认为覆盖Document 不是一个好习惯。

我的建议是为你的 API 使用一个命名空间，并在你的 api 命名空间中创建你的 Document 和 HTMLElement 等，例如：

var api = {
    Document: { /* your implementation */ },
    HTMLElement: { /* your implementation */ }
    //...
};

var myDocument = new api.Document();

除此之外，您还可以继承真正的 Document 原型并在您自己的对象中使用它，如下所示：

api.Document = function(){ /* your implementation */ }
api.Document.prototype = Document.prototype;

var myDocument = new api.Document();

希望这对您有所帮助，我理解您的问题...

【讨论】：