Какой объект «удерживает» 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, похоже, не определен ни в одном прототипе.

Чтобы быть ясным, я знаю, что эта функция является нативной функцией, но то, что я не понимаю, заключается в том, как со стандартной точки зрения свойство не доступно из какого-либо прототипа, но все же там, когда нам нужно Это.

Answer 1

DOM интерфейсы сложны. Они указаны как интерфейс (EventTarget в этом случае), но методы должны быть реализованы на каждом «классе» или прототипе отдельно, поскольку JS не имеет множественного наследования или интерфейсов. Точное наследование hierarachy может варьироваться между браузерами и их версиями.

В вашем примере addEventListener фактически реализован на XMLHttpRequest прототипа (по крайней мере, в моей опере), только вы проверяли это неправильно:

// 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 прототип проведения этого свойства:

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

Примите о взгляд на Mozilla MDN: EventTarget.addEventListener()

Метод EventTarget.addEventListener() регистрирует указанный слушателя на EventTarget это называется на.

От Mozilla MDN: EventTarget

EventTarget представляет собой интерфейс реализуется объектами, которые могут получать события и могут иметь слушателей для них.

Элемент, документ и окно являются наиболее распространенными объектами событий, но другие объекты могут быть объектами событий тоже, например, XMLHttpRequest, AudioNode, AudioContext и другие.

Методы

EventTarget.addEventListener() Зарегистрировать обработчик события определенного типа событий на EventTarget. .......... ..........

Так addEventListener можно было бы назвать всех интерфейсов, который наследует свойства от интерфейса EventTarget (window, document, Element т.д.).