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

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, он пройдет проверку, но .. .)