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时，它将在除IE和Edge之外的所有浏览器中返回true。在IE和Edge中，它返回false，因此我不能将其作为普通的DOM元素使用。有什么想法吗？有什么方法可以解析它吗？

Answer 1

对于诸如DOM元素之类的主机提供的对象，您不能过分依赖。如您所见，不同的主机可以自由地以不同的方式实现事物。

另外：instanceof不是可靠的跨realm。因此，如果您从另一个窗口（另一个领域）获取一个对象（任何类型，而不仅仅是主机提供的对象），则instanceof可能会失败。这是因为instanceof的工作方式是检查所有对象的原型链，并查看其原型中是否有任何原型是与之比较的函数的prototype属性上的对象（在您的示例中为Element）。这就是我们拥有Array.isArray的原因，因为如果数组来自另一个窗口，a instanceof Array就会失败。

没有理由在DOM元素上使用instanceof。只需使用元素。如果要确保它是一个元素，则可以使用a.detail.nodeType === 1进行比较可靠的检查。（可靠的原因是：它适用于任何DOM元素。自然地，如果有人给您提供具有nodeType属性且对象不是DOM元素的avlue 1的对象，它将通过检查，但是...）

同一对象如何在不同的浏览器中返回不同的instanceof？

1 个答案: