DOM对象中的继承和原型链

Question

我只需要一些解释而无需任何代码示例。我知道什么是对象，构造函数和原型。我无法弄清楚让HTMLElement和HTMLDivElement之间的关系如何，或HTMLMediaElement和HTMLVideoElement。我知道有一些类似原型链的东西，该对象可以访问其构造函数的原型。但HTMLDivElement构造函数是Function（），而不是HTMLElement()，另一方面，HTMLVideoElement我可以访问HTMLMediaElement原型的所有方法和属性。如果有人能为我澄清，我将非常感激。总而言之，是什么关系以及什么创造了链之间让我们说function HTMLDivElement() - ＆gt; function HTMLElement() - ＆gt; function Element() - ＆gt; function Node() - ＆gt; function Object()。

Answer 1

用户创建的对象与Javascript中平台（例如Web浏览器）提供的对象之间存在差异。 The former are known as "native objects" and the latter as "host objects".

原生对象可能对constructor和prototype有帮助。主机对象通常不会，因为您无法以相同的方式构造它们。

使用内部原型属性完成实际属性查找。可以使用Object.getPrototypeOf或__proto__属性找到此信息。您可以通过检查原型链来查看原型链。请注意，__proto__更具可读性，可能适用于现代Web浏览器，但Object.getPrototypeOf是规范推荐的方法。

例如，假设vid是对视频节点的引用：

vid.__proto__ // the HTMLVideoElement object
vid.__proto__.__proto__ // the HTMLMediaElement object
vid.__proto__.__proto__.__proto__ // the HTMLElement object

// or equivalents

Object.getPrototypeOf(vid) // the HTMLVideoElement
Object.getPrototypeOf(Object.getPrototypeOf(vid)) // the HTMLMediaElement object
Object.getPrototypeOf(Object.getPrototypeOf(Object.getPrototypeOf(vid))) // the HTMLElement object

一直到

vid.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__ // === Object.prototype

// or

Object.getPrototypeOf(Object.getPrototypeOf(Object.getPrototypeOf(Object.getPrototypeOf(Object.getPrototypeOf(Object.getPrototypeOf(Object.getPrototypeOf(vid)))))))

查看“真实”原型链的方法是使用此方法。