javascript - 哪个对象 "holds"addEventListener？

Question

由于某些原因，我正在寻找定义addEventListener 的源对象。从 XMLHttpRequest 开始，我发现了以下内容:

> Object.prototype.hasOwnProperty(XMLHttpRequest.prototype, 'addEventListener')
false

> XMLHttpRequest.prototype.__proto__
XMLHttpRequestEventTarget {}

> Object.prototype.hasOwnProperty(XMLHttpRequestEventTarget.prototype, 'addEventListener')
false

> XMLHttpRequestEventTarget.prototype.__proto__
EventTarget {}

> Object.prototype.hasOwnProperty(EventTarget.prototype, 'addEventListener')
false

> EventTarget.prototype.__proto__
Object {}

这怎么可能？ addEventListener 似乎没有在任何原型(prototype)中定义。

需要说明的是，我知道这个函数是一个原生函数，但我不明白的是，从标准的 Angular 来看，该属性在任何原型(prototype)中都不可用，但在我们需要它时仍然存在.

Answer 1

DOM 接口(interface) 很复杂。它们被指定为一个接口(interface)(在本例中为 EventTarget)，但是这些方法必须分别在每个“类”或原型(prototype)上实现，因为 JS 没有多重继承或接口(interface)。不过，确切的继承层次结构可能因浏览器及其版本而异。

在您的示例中，addEventListener 实际上是在 XMLHttpRequest 原型(prototype)上实现的(至少在我的 Opera 中)，只是您检查错了:

// Opera 12
XMLHttpRequest.prototype.hasOwnProperty("addEventListener") // true
Object.prototype.hasOwnProperty.call(XMLHttpRequest.prototype,  "addEventListener") // true
//                              ^^^^
Object.prototype.isPrototypeOf(XMLHttpRequest.prototype) // true - flat hierarchy

// Chrome 48
EventTarget.prototype.hasOwnProperty("addEventListener") // true
XMLHttpRequest.prototype instanceof EventTarget // true - some indirection