Document、HTMLDocument關係的探究

首先貼上代碼： 

1 console.log(Object.getPrototypeOf(document));
2 console.log(Object.getPrototypeOf(Object.getPrototypeOf(document)));

 

在FF上的運行結果以下所示:

 

 第一行代碼返回的是一個HTMLDocument對象，第二行代碼返回的是一個Document對象。

經過分析咱們能夠得出document對象的prototype爲HTMLDocument對象，HTMLDocument對象的prototype爲Document對象。

注意這裏的document對象就是咱們常用的document.getElementById()函數中的document，這個document對象讓我想到了JavaScript中的Object。

 

《Professional JavaScript for Web Developers》中描述以下：

JavaScript represents document nodes via the Document type. In browsers, the document object is an instance of HTMLDocument (which inherits from Document) and represents the entire HTML page. The document object is a property of window and so is accessible globally.

 

寫這段代碼時犯了一些錯誤：

1. 在全局中聲明瞭一個變量document

1 var document = new Document();
2 console.log(document.constructor);        // HTMLDocument對象

代碼分析：

console.log(Object.getOwnPropertyDescriptor(window, "document"));

configurable屬性值爲false， set函數沒有定義，因此咱們根本就不可能改變window.document.

上面的代碼聲明的全局變量document和window.document衝突了，但document的賦值是不會改變window.document的。

這裏還有一個誤區，其實document對象是HTMLDocument()構造函數的一個實例（上面的高程中也有提到），千萬不要誤覺得document對象是Document()構造函數的實例。

 

2. 實例對象是不能直接經過prototype屬性來訪問其prototype對象的。

1 console.log(document.prototype);    // undefined

一樣，下面這段代碼也是錯誤的:

1 console.log(Object.getPrototypeOf(document).prototype);

 

咱們應該明白prototype chain是經過instance來實現的。所以Object.getPrototypeOf(document)返回的是一個Document()構造函數的instance. instance只有[[Prototype]]，這個屬性是不能外部使用的。

 

從這個例子中，咱們也能夠看出JavaScript(Object)，DOM，BOM的聯繫是多麼的緊密~

DOM和BOM的關係能夠參考我轉的一篇博文[http://www.cnblogs.com/linxd/p/4481052.html]