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)中定义。

需要明确的是，我知道这个函数是一个 native 函数，但我不明白的是，从标准的 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