Javascript: typeof and instanceof results contradicting?

Question

I am seeing contradicting results when doing typeof and instanceof on an object.

I have the following test page:

<html>
    <body>
        <object id="test" />
        <script type="text/javascript">
            var foo = document.getElementById("test");
            console.log(typeof foo); // returns "function"
            console.log(foo instanceof Function); // returns false
            console.log(foo instanceof Object); // returns true
        </script>
    </body>
</html>

"typeof foo" is returning "function" but "foo instanceof Function" is returning false.

This doesn't make sense to me. How can an object have a type be function but not be an instance of a function? Also, I expected "typeof foo" to return "object".

possible duplicate of Why does instanceof return false for some literals? — John Hartsock
– John Hartsock, Commented Mar 30, 2011 at 20:11
When I do "foo instanceof Object" it's returning true. I don't think the object is a literal but I could be wrong... — treaint
– treaint, Commented Mar 30, 2011 at 20:16
What browser do you use? The value returned by document.getElementById should not be a function but an object of Element or null. — Gumbo
– Gumbo, Commented Mar 30, 2011 at 20:23

Tim Down · Accepted Answer · 2011-03-30 22:08:37Z

2

The essential fact is that DOM elements (obtained, for example, using document.getElementById()) are not native JavaScript objects. Instead, they are host objects. As such, they are not subject to the usual rules that apply to native JavaScript objects, and their behaviour will (quite legitimately) vary wildly from one browser to the next.

In short, all bets are off. Don't rely on the behaviour of host objects outside of their documented API.

Related references:

edited Mar 30, 2011 at 22:08

answered Mar 30, 2011 at 22:00

Tim Down

326k76 gold badges461 silver badges546 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Oriol · Accepted Answer · 2015-02-15 20:25:22Z

object and embed HTML elements are host objects.

ECMAScript3 11.4.3 didn't define what typeof should return for these. The table of returned values for Objects was

Object (native and doesn't implement [[Call]]): "object"

Object (native and implements [[Call]]): "function"

Object (host): Implementation-dependent

However, returning "function" is consistent with ECMAScript5 11.4.3:

Object (native and does not implement [[Call]]): "object"

Object (native or host and does implement [[Call]]): "function"

Object (host and does not implement [[Call]]): Implementation-defined except may not be "undefined", "boolean", "number", or "string".

object and embed HTML elements are objects with an internal [[Call]] property, so typeof must return "function".

This is explained in Bug 268945:

Comment #15, by Boris Zbarsky:

The [[Call]] is very intentional on the DOM side: these are callable objects.
Comment #16, by Tom Schuster:

This bug is invalid these object have a [[Call]] internal method and ES5 11.4.3 explicitly say "Object (native or _host_ and does implement [[Call]])" => "function".

Since object and embed HTML elements implement an internal [[Call]] property, they are callable objects. However, they are not functions:

4.3.24 function

member of the Object type that is an instance of the standard built-in Function constructor and that may be invoked as a subroutine

object HTML elements inherit from HTMLObjectElement.prototype, and embed HTML elements from HTMLEmbedElement.prototype.

The prototype chain continues with

HTMLObjectElement.prototype
HTMLElement.prototype
Element.prototype
Node.prototype
Object.prototype

Therefore, they are not Function instances, because they don't inherit from Function.prototype.

kennebec · Accepted Answer · 2011-03-30 22:19:55Z

1

Safari returns 'function' for typeof document.getElementsByTagName('p'),

which gave me a bad time a while ago, when I assumed all clients would return 'object'.

It is good to test our pre-conceptions, even when an exception makes no sence.

Also, debuggers are lovely, but they do not always report the same values as their browser.

answered Mar 30, 2011 at 22:19

kennebec

105k32 gold badges109 silver badges127 bronze badges

Comments

Peter Bailey · Accepted Answer · 2011-03-30 20:25:25Z

I'm not sure why 'function' is returned for a <object> node, but the reason instaceof Function fails is because that's essentially a check against the constructor, the difference of which can be illustrated like so

<html>
    <body>
        <object id="test" />
        <script type="text/javascript">

            var foo = document.getElementById("test");

            var bar = function() {}

            console.log( typeof foo );
            console.log( foo instanceof Function );
            console.log( foo.constructor ); // Object()

            console.log( typeof bar );
            console.log( bar instanceof Function );
            console.log( bar.constructor ); // Function()

        </script>
    </body>
</html>

So in this case, it's actually typeof that is behaving oddly, and not in a way that is documented that I can see.

user2174888 · Accepted Answer · 2013-03-15 16:59:36Z

0

In your first example this dom element does not exist when the script is run. In your second it does, the answers are correct in the second the difference is between typeof and constructor. typeof returns a function because document.getElementById returns a function. constructor tells you the name of that function "HTMLElement".

you could for example invent your own elements starting with var myElement = new HTMLElement()

answered Mar 15, 2013 at 16:59

user2174888

91 bronze badge

1 Comment

Oriol Over a year ago

document.getElementById doesn't return a function. But it may return callable objects, like object or embed. Only in that case typeof will return "function". And HTMLElement is a function but not a constructor, so new HTMLElement throws.

treaint · Accepted Answer · 2011-03-30 21:41:56Z

-1

I found some additional strange behavior.

If you move the javascript code above the object, then typeof works correctly but instanceof does not work.

<html>
<body>
    <script type="text/javascript">
        var foo = document.getElementById("test");
        console.log(typeof foo); // returns object (this is correct now)
        console.log(foo instanceof Function); // returns false (this is correct)
        console.log(foo instanceof Object); // returns false (this is wrong)
        console.log(foo instanceof HTMLElement); // returns false (this is wrong)
        console.log(foo instanceof Node); // returns false (this is wrong)
    </script>
    <object id="test" />
</body>

VS

<html>
<body>
    <object id="test" />
    <script type="text/javascript">
        var foo = document.getElementById("test");
        console.log(typeof foo); // returns function (this is wrong)
        console.log(foo instanceof Function); // returns false
        console.log(foo instanceof Object); // returns true (this is correct)
        console.log(foo instanceof HTMLElement); // returns true (this is correct)
        console.log(foo instanceof Node); // returns true (this is correct)
    </script>
</body>

So basically if the script is below the object, typeof behaves strangely but if the script is above the object instanceof behaves strangely.

answered Mar 30, 2011 at 21:41

treaint

7091 gold badge8 silver badges13 bronze badges

2 Comments

HBP Over a year ago

In your first test add a line : console.log (foo === null) which I expect will return true. This is because the element does not exist when the script is run so the getElement returns null. The other displays are consistent with foo being null.

Oriol Over a year ago

This only seems to work because typeof null returns "object" because of historical reasons. The getElementById method doesn't return the element, because it hasn't been parsed yet.

Collectives™ on Stack Overflow

Javascript: typeof and instanceof results contradicting?

6 Answers 6

Comments

Comments

Comments

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related