Почему один и тот же объект может возвращать разные экземпляры в разных браузерах?

Question

Я использую плагин AOS, и он передает объект на пользовательское событие. Объект выглядит так:

[object Object]: {detail: Object}

detail: Object
accessKey: ""
align: ""

attributes: Object
baseURI: "http://localhost:3000/docs/countup.html"
childElementCount: 0

childNodes: Object

children: Object

classList: Object
className: "aos-init aos-animate"
clientHeight: 0
clientLeft: 0
clientTop: 0
clientWidth: 788
contentEditable: "inherit"

dataset: Object
dir: ""
draggable: false
firstChild: null
firstElementChild: null
hidden: false
hideFocus: false
id: ""
innerHTML: ""
innerText: ""
isContentEditable: false
lang: ""
lastChild: null
lastElementChild: null
localName: "h1"
msContentZoomFactor: 1
msRegionOverflow: "undefined"
namespaceURI: "http://www.w3.org/1999/xhtml"

nextElementSibling: Object

nextSibling: Object
nodeName: "H1"
nodeType: 1
nodeValue: null
offsetHeight: 0
offsetLeft: 32

offsetParent: Object
offsetTop: 48
offsetWidth: 788
onabort: null
onactivate: null
onbeforeactivate: null
onbeforecopy: null
onbeforecut: null
onbeforedeactivate: null
onbeforepaste: null
onblur: null
oncanplay: null
oncanplaythrough: null
onchange: null
onclick: null
oncontextmenu: null
oncopy: null
oncuechange: null
oncut: null
ondblclick: null
ondeactivate: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
ondurationchange: null
onemptied: null
onended: null
onerror: null
onfocus: null
ongotpointercapture: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onloadeddata: null
onloadedmetadata: null
onloadstart: null
onlostpointercapture: null
onmousedown: null
onmouseenter: null
onmouseleave: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onmscontentzoom: null
onmsgesturechange: null
onmsgesturedoubletap: null
onmsgestureend: null
onmsgesturehold: null
onmsgesturestart: null
onmsgesturetap: null
onmsinertiastart: null
onmsmanipulationstatechanged: null
onpaste: null
onpause: null
onplay: null
onplaying: null
onpointercancel: null
onpointerdown: null
onpointerenter: null
onpointerleave: null
onpointermove: null
onpointerout: null
onpointerover: null
onpointerup: null
onprogress: null
onratechange: null
onreset: null
onscroll: null
onseeked: null
onseeking: null
onselect: null
onselectstart: null
onstalled: null
onsubmit: null
onsuspend: null
ontimeupdate: null
onvolumechange: null
onwaiting: null
onwebkitfullscreenchange: null
onwebkitfullscreenerror: null
onwheel: null
outerHTML: "<h1 class="aos-init aos-animate" data-aos="" data-toggle="countup" data-to="256" data-from="0" data-aos-id="countup:in"></h1>"
outerText: ""

ownerDocument: Object

parentElement: Object

parentNode: Object
prefix: null

previousElementSibling: Object

previousSibling: Object
scrollHeight: 0
scrollLeft: 0
scrollTop: 0
scrollWidth: 788
spellcheck: true

style: Object
tabIndex: 0
tagName: "H1"
textContent: ""
title: ""

__proto__: Object

__proto__: Object

Объект выше передается как e.detail, Проблема в том, когда я бегу e.detail instanceof Element это возвращается true во всех браузерах, кроме IE и Edge. В IE и Edge это возвращает falseпоэтому я не могу работать с ним как с обычным элементом DOM. Есть идеи почему? Есть ли способ разобрать это или что-то?

Answer 1

Вы не можете полагаться на многое, когда дело доходит до предоставляемых хостом объектов, таких как элементы DOM. Как вы обнаружили, разные хосты могут реализовывать разные вещи по-разному.

По отдельности: instanceof не надежная перекрестная сфера. Поэтому, если вы получаете объект (любого рода, а не только предоставленный хостом объект) из другого окна (которое является другой областью), instanceof вероятно потерпит неудачу. Это потому что путь instanceof работает, проверяя цепочку прототипов объекта, на котором вы все это делаете, и выясняя, является ли какой-либо из его прототипов объектом на prototype свойство функции, с которой вы сравниваете его (Elementв вашем примере). Это часть того, почему мы имеем Array.isArray, так как a instanceof Array терпит неудачу, если массив прибывает из другого окна.

Там нет причин для использования instanceof на элемент DOM. Просто используйте элемент. Если вы хотите убедиться, что это элемент, достаточно надежная проверка a.detail.nodeType === 1, (Надежно, как в: Это будет работать для любого элемента DOM. Естественно, если кто-то дает вам объект с nodeType свойство с avlue 1, которое не является элементом DOM, оно пройдет проверку, но...)