JavaScript isPrototypeOf vs instanceof usage

Question

Suppose we have the following:

function Super() {
      // init code
}

function Sub() {
      Super.call(this);
      // other init code
}

Sub.prototype = new Super();

var sub = new Sub();

Then, in some other part of our ocde, we can use either of the following to check for the relationship:

sub instanceof Super;   

or

Super.prototype.isPrototypeOf( sub )

Either way, we need to have both the object (sub), and the parent constructor (Super). So, is there any reason why you'd use one vs the other? Is there some other situation where the distinction is more clear?

I've already carefully read 2464426 , but didn't find a specific enough answer.

Answer 1

Imagine you don't use constructors in your code, but instead use Object.create to generate objects with a particular prototype. Your program might be architected to use no constructors at all:

var superProto = {
    // some super properties
}

var subProto = Object.create(superProto);
subProto.someProp = 5;

var sub = Object.create(subProto);

console.log(superProto.isPrototypeOf(sub));  // true
console.log(sub instanceof superProto);      // TypeError

Here, you don't have a constructor function to use with instanceof . You can only use subProto.isPrototypeOf(sub) .

Answer 2

It makes little difference when you use constructor functions. instanceof is a little cleaner, perhaps. But when you don't...:

var human = {mortal: true}
var socrates = Object.create(human);
human.isPrototypeOf(socrates); //=> true
socrates instanceof human; //=> ERROR!

So isPrototypeOf is more general.

Answer 3

According to this MDN Ref :

isPrototypeOf() differs from the instanceof operator. In the expression object instanceof AFunction , the object prototype chain is checked against AFunction.prototype , not against AFunction itself.

Answer 4

var neuesArray = Object.create(Array);

Array.isPrototypeOf(neuesArray);            // true
neuesArray instanceof Array                 // false
neuesArray instanceof Object                // true
Array.isArray(neuesArray);                  // false
Array.prototype.isPrototypeOf(neuesArray);  // false
Object.prototype.isPrototypeOf(neuesArray); // true

Do you understand my friend :) - is simple

Answer 5

Just complement @apsillers's answer

object instanceof constructor

var superProto = {}

// subProto.__proto__.__proto__ === superProto
var subProto = Object.create(superProto);
subProto.someProp = 5;
// sub.__proto__.__proto__ === subProto
var sub = Object.create(subProto);

console.log(superProto.isPrototypeOf(sub)); // true
console.log(sub instanceof superProto); // TypeError: Right-hand side of 'instanceof' is not callable

// helper utility to see if `o1` is
// related to (delegates to) `o2`
function isRelatedTo(o1, o2) {
  function F(){}
  F.prototype = o2;
  // ensure the right-hand side of 'instanceof' is callable
  return o1 instanceof F; 
}
isRelatedTo( b, a ); 

TypeError: Right-hand side of 'instanceof' is not callable

instanceof need the right-hand value to be callable, which means it must be a function(MDN call it as the constructor)

and instanceof tests the presence of constructor.prototype in object's prototype chain.

but isPrototypeOf() don't have such limit. While instanceof checks superProto.prototype , isPrototypeOf() checks superProto directly.