哪个对象“持有” addEventListener？

Question

For reasons, I'm looking for the source object that defines addEventListener . Starting from XMLHttpRequest , I've discovered the following:

> 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 {}

How is it possible? addEventListener doesn't seem to be defined in any prototype.

To be clear, I know that this function is a native function, but what I don't understand is how, from a standard point of view, the property isn't available from any prototype but still there when we need it.

Answer 1

DOM interfaces are complicated. They are specified as an interface ( EventTarget in this case), but the methods have to be implemented on each "class" or prototype separately because JS doesn't have multiple inheritance or interfaces. The exact inheritance hierarachy may vary between browsers and their versions though.

In your example, addEventListener is actually implemented on the XMLHttpRequest prototype (at least in my Opera), only you were checking it wrong:

// 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

Answer 2

EventTarget prototype holding that property:

console.log(EventTarget.prototype.hasOwnProperty('addEventListener'))
// true

Take o look on Mozilla MDN: EventTarget.addEventListener()

The EventTarget.addEventListener() method registers the specified listener on the EventTarget it's called on.

From Mozilla MDN: EventTarget

EventTarget is an interface implemented by objects that can receive events and may have listeners for them.

Element , document , and window are the most common event targets, but other objects can be event targets too, for example XMLHttpRequest, AudioNode, AudioContext, and others.

Methods

EventTarget.addEventListener() Register an event handler of a specific event type on the EventTarget. .......... ..........

So addEventListener could be called on all interfaces which inherits properties from EventTarget interface( window , document , Element etc.).