Why "HTMLDocument==Function.prototype" is false?

Question

In my understanding, HTMLDocument is a constructor function, so we have below:

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

But why when it comes to Function.prototype, it is false?

HTMLDocument.__proto__==Function.prototype // false

Because any constructor function equals to Function.prototype, like: `function Foo(){}; Foo.__proto__==Function.prototype //true`. — qqwenwenti, Apr 22 '21 at 11:28
@qqwenwenti ... why do you think is there something called a _**prototype chain**_? — Peter Seliger, Apr 22 '21 at 11:43
@Peter Seliger Well, I guess everything in JavaScript is following the prototype chain rule, every object every function ... and every html element. — qqwenwenti, Apr 22 '21 at 11:53
@qqwenwenti ... *"I guess everything in JavaScript is following the prototype chain rule"* ... exactly, and *IAmDranged* meanwhile provided a perfect explanation for why you mostly can not expect the direct prototype (link) to be the first best match (within a chain). — Peter Seliger, Apr 22 '21 at 12:39
@qqwenwenti ... in consequence of all that the following expressions equals `true` ... `HTMLDocument.__proto__.__proto__.__proto__.__proto__ === Function.prototype` ... but you should also be reminded. The preferred way of retrieving an object's prototype is not the non standard (even deprecated) [`__proto__`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto) property but, as *IAmDranged* perfectly did demonstrate it, via [`Object.getPrototypeOf`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf) — Peter Seliger, Apr 22 '21 at 12:53
@Peter Seliger I'm trying.. Just thinking a shorter phrase is gonna be easier for a beginner lol.. anyway I'm trying to fix that. Thx a lot! — qqwenwenti, Apr 22 '21 at 12:58

score 3 · Answer 1 · answered Apr 22 '21 at 12:12

This is the ouput I get when going down the HTMLDocument prototype chain.

Object.getPrototypeOf(HTMLDocument)
// ƒ Document() { [native code] }
Object.getPrototypeOf(Document)
// ƒ Node() { [native code] }
Object.getPrototypeOf(Node)
// ƒ EventTarget() { [native code] }
Object.getPrototypeOf(EventTarget)
// ƒ () { [native code] }

So Function actually is in the prototype chain, it is just not the actual direct prototype of HTMLDocument.

Honestly your way down to the prototype chain is stunning! – qqwenwenti Apr 22 '21 at 12:37 — qqwenwenti, Apr 22 '21 at 12:37

AL-zami · Answer 2 · 2021-04-23T07:02:47.663

document is the actual object that is created & HTMLDocument is used to construct it. You can check it by typing document.constructor in the console, which will show HTMLDocuement in the console. JavaScript uses prototypal inheritance & according to this post, internal __proto__ property is used to navigate the prototype inheritance chain.

HTMLDcoument itself is constructed using Function constructor as any other object in JavaScript. That is why, the following statement evaluates to true.

HTMLDocument.constructor == Function // true

But HTMLDocument is intended to use as a extension for Document interface. So that, any object of type HTMLDocument must have access to all the properties of Document interface as well. In order to maintain that, __proto__ of HTMLDocuemnt is internally set to the Document object. That's why HTMLDocument.__proto__ doesn't refer to Function.prototype.

HTMLDocument.__proto__ == Document // true.
HTMLDocument.__proto__ == Function // false

The code snippet above means, HTMLDocument object will have access to all the properties from Document object via its prototype chain directly, not the Function object. And you must already know, that is for obvious reasons.

That left us with,

HTMLDocument.prototype == document.__proto__ // true

Above statement means, document object will have access to its parent HTMLDocument's prototype object, as all instance objects do.

Here is the total inheritance chain for your convenience:

document (actual object)--> HTMLDocument-->Document-->Node-->EventTarget-->Function

Why "HTMLDocument==Function.prototype" is false?

2 Answers2