isPrototypeOf() usage when dealing with inheritance in JavaScript

Question

//I have this base Rectangle constructor function
function Rectangle (length, width){
    this.length = length;
    this.width = width;
}

Rectangle.prototype.getArea = function (){
    return this.length * this.width;
};

//Creating Square constructor function that will inherit from Rectangle...

function Square(size){
    this.length = size;
    this.width  = size;
}

Square.prototype = new Rectangle(); 
Square.prototype.constructor = Square;

//creating rectangle and square instances
var rect = new Rectangle(5, 10);
var square = new Square(6);

console.log(rect.getArea());  //50
console.log(square.getArea());  //36 

console.log(Rectangle.prototype.isPrototypeOf(Square.prototype)); //true

console.log(Rectangle.prototype.isPrototypeOf(rect)); //true

console.log(Square.prototype.isPrototypeOf(square));  //true

my question is when i do the below console.log(), I expected it to print false. However, I got true.

console.log(Rectangle.prototype.isPrototypeOf(square));  //true

1) Does this mean isPrototypeOf goes to multiple levels?

2) if isPrototypeOf goes multiple levels, what is the point of using isPrototypeOf instead of using instanceof?

I've read this Why do we need the isPrototypeOf at all? but didn't understand how it applies in my use-case.

score 2 · Accepted Answer · answered Apr 20 '16 at 06:15

isPrototypeOf checks if an object is within another object's prototype chain so yes it does go multiple levels

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf

They can be used for the same purpose. You can do square instanceof Square or Square.prototype.isPrototypeOf(square) but as you can see, instanceof has a specific purpose to match objects with their constructors where as isPrototypeOf can be used more broadly to check if any object is within the prototype chain of another.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof

score 1 · Answer 2 · answered Apr 20 '16 at 06:15

The isPrototypeOf() method tests for an object in another object's prototype chain

Here in Your Code

console.log(Rectangle.prototype.isPrototypeOf(square)); // true

It prints true because Square Method is in the the chain of getArea Method and the getArea is the prototype method of Rectangle

Rectangle.prototype.getArea = function (){
    return this.length * this.width;
};

For Example According to Mozilla Docs

 function Fee() {
  // ...
}

function Fi() {
  // ...
}
Fi.prototype = new Fee();

function Fo() {
  // ...
}
Fo.prototype = new Fi();

function Fum() {
  // ...
}
Fum.prototype = new Fo()

Later on down the road, if you instantiate Fum and need to check if Fi's prototype exists within the Fum prototype chain, you could do this:

var fum = new Fum();
// ...

if (Fi.prototype.isPrototypeOf(fum)) {
  // do something safe
}

isPrototypeOf() usage when dealing with inheritance in JavaScript

2 Answers2