Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What's the difference between isPrototypeOf and instanceof in Javascript?

In some of my own older code, I use the following:

Object.prototype.instanceOf = function( iface ) {  return iface.prototype.isPrototypeOf( this ); }; 

Then I do (for example)

[].instanceOf( Array ) 

This works, but it seems the following would do the same:

[] instanceof Array 

Now, surely this is only a very simple example. My question therefore is:

Is a instanceof b ALWAYS the same as b.prototype.isPrototypeOf(a) ?

like image 610
Steffen Heil Avatar asked Mar 17 '10 17:03

Steffen Heil


People also ask

What is isPrototypeOf in JavaScript?

isPrototypeOf() The isPrototypeOf() method checks if an object exists in another object's prototype chain.

What is Instanceof in JavaScript?

The instanceof operator in JavaScript is used to check the type of an object at run time. It returns a boolean value if true then it indicates that the object is an instance of a particular class and if false then it is not.

Should I use Instanceof JavaScript?

Strictly speaking it is a function object, since everything is an object in Javascript. And this function object has a prototype, because every function has a prototype. The instanceof operator should be avoided because it fakes classes, which do not exist in Javascript.

What is Instanceof array?

value instanceof Array expressions evaluates to true if value is an array. Note: value instanceof Array evaluates to false when value is an array created in a different iframe than the Array constructor function.


2 Answers

Yes, they do the same thing, both traverse up the prototype chain looking for an specific object in it.

The difference between both is what they are, and how you use them, e.g. the isPrototypeOf is a function available on the Object.prototype object, it lets you test if an specific object is in the prototype chain of another, since this method is defined on Object.prototype, it is be available for all objects.

instanceof is an operator and it expects two operands, an object and a Constructor function, it will test if the passed function prototype property exists on the chain of the object (via the [[HasInstance]](V) internal operation, available only in Function objects).

For example:

function A () {   this.a = 1; } function B () {   this.b = 2; } B.prototype = new A(); B.prototype.constructor = B;  function C () {   this.c = 3; } C.prototype = new B(); C.prototype.constructor = C;  var c = new C();  // instanceof expects a constructor function  c instanceof A; // true c instanceof B; // true c instanceof C; // true  // isPrototypeOf, can be used on any object A.prototype.isPrototypeOf(c); // true B.prototype.isPrototypeOf(c); // true C.prototype.isPrototypeOf(c); // true 
like image 84
Christian C. Salvadó Avatar answered Oct 21 '22 06:10

Christian C. Salvadó


Is a instanceof b ALWAYS the same as b.prototype.isPrototypeOf(a) ?

No, a instanceof b will not always behave the same as b.prototype.isPrototypeOf(a).

CMS' answer pointed out that they differ in what they are (one is an operator and the other is a built-in method available on the Object.prototype object). This is correct, however there are also some special cases for which a instanceof b will result in a TypeError while b.prototype.isPrototypeOf(a) will work just fine and vice versa.

Difference #1

The right-hand side of instanceof is expected to be a constructor function.

If b is not a function:

  • a instanceof b will result in a TypeError.

  • b.prototype.isPrototypeOf(a) will work just fine.

const b = {      prototype: {}  };  const a = Object.create( b.prototype );    console.log( b.prototype.isPrototypeOf(a) );    // true  console.log( a instanceof b );                  // TypeError: Right-hand side of 'instanceof' is not callable

Difference #2

When using b.prototype.isPrototypeOf(a), b.prototype should be inheriting from Object.prototype:

If b.prototype has not access to the Object.prototype.isPrototypeOf() method:

  • b.prototype.isPrototypeOf(a) will result in a TypeError.
  • a instanceof b will work just fine.

function B() {};  B.prototype = Object.create( null );    const a = new B();    console.log( a instanceof B );              // true  console.log( B.prototype.isPrototypeOf(a) ) // TypeError: B.prototype.isPrototypeOf is not a function

Difference #3

If the right-hand side of instanceof is a bound function, it is treated equivalently to its target function.

If b is a bound function:

  • a instanceof b will work just fine.
  • b.prototype.isPrototypeOf(a) will result in a TypeError (bound functions don't have a prototype property).

function B() {};  const BoundB = B.bind( null );  const a = new B();    console.log( a instanceof BoundB );              // true  console.log( BoundB.prototype.isPrototypeOf(a) ) // TypeError: Cannot read property 'isPrototypeOf' of undefined

Conclusion

  • If you are dealing with prototypal inheritance established through Object.create(), without the use of constructors, you should probably be using the Object.prototype.isPrototypeOf() method (indeed the use cases of instanceof are more restricted in that instanceof expects its right-hand side parameter to be a constructor function).
  • If you are dealing with constructors you will be slightly safer by using the instanceof operator (you will be able to cover bound functions as well as the cases where Object.prototype does not lie in the prototype chain of Constructor.prototype).
like image 36
Oliver Sieweke Avatar answered Oct 21 '22 07:10

Oliver Sieweke