Understanding prototype inheritance

Question

I've drawn the following picture demonstrating how the objects are inherited ( function constructors are marked as blue, objects created from those constructors are marked as green):

Here is the code creating such hierarchy:

function Figure() {}

function Rect() {}
Rect.prototype = new Figure();

function Square() {}
Square.prototype = new Rect();

function Ellipse() {}
Ellipse.prototype = new Figure();

function Circle() {}
Circle.prototype = new Ellipse();

Now I want to check if new Square() is inherited from the Rect, so here is how I expect JavaScript engine to check it:

var s = new Square();
s instanceof Rect // ?

s.__proto__ === Rect.prototype // false
new Rect()      new Figure()

s.__proto__.__proto__ === Rect.prototype // true
new Figure()              new Figure()

So s instanceof Rect should return true. This is expected and is actually what is returned if I run the code. But then I want to check if new Circle() is inherited from the Rect, so I follow the same logic:

var c = new Circle();
c instanceof Rect // ?

c.__proto__ === Rect.prototype // false
new Ellipse()      new Figure()

c.__proto__.__proto__ === Rect.prototype // true
new Figure()              new Figure()

So, using this checking logic c instanceof Rect should return true, but if I actually run the code, c instanceof Rect returns false. Am I misunderstanding the mechanism of the instanceof operator?

can you include 'object' in your drawing so I understand which way you think the arrows go? — Chris Clark, Jun 28 '16 at 19:03
JS has a *prototype*-driven structure, **not** a true multi-level class inheritance scheme typical of other languages. Each object has an implied pointer to *its* prototype, and this forms a singly-linked chain. Mozilla Foundation wrote a good descriptive article about what this scheme is, and what it is *not,* at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain. This article also discusses JS-vs.ECMA and language-version differences. — Mike Robinson, Jun 28 '16 at 19:05
@ChrisClark, the `object` is on the right, it's the `Figure.prototype` — Max Koretskyi, Jun 28 '16 at 19:06
I think you should first include your functions definitions here. — loretoparisi, Jun 28 '16 at 19:09
@MikeRobinson, I've read many articles and this question is about a particularly configured inheritance chain and the confusion it brings — Max Koretskyi, Jun 28 '16 at 19:12
@loretoparisi, what do you mena by function definitions and why do you need them? I've shown all references using arrows — Max Koretskyi, Jun 28 '16 at 19:13
I understand, of course. I think that you need to show us *code.* not an admittedly-pretty picture. We need to see a short, runnable example of whatever builds the data-structure described in that pretty picture. If your pretty-picture really did describe your situation, a `Circle` would not be an `instanceof Rect`. — Mike Robinson, Jun 28 '16 at 19:20
This stack overflow drawing helped me a lot more, there is a difference between __proto__ and prototype. http://stackoverflow.com/questions/9959727/proto-vs-prototype-in-javascript — Chris Clark, Jun 28 '16 at 19:22
There should not be any arrows from the instances to the constructors. Where did you get these from? — Bergi, Jun 28 '16 at 19:30
@Bergi, these are references of the `constructor` property. Do you think it's better if I remove them? — Max Koretskyi, Jun 28 '16 at 19:33
The only prototype that `Rect` and `Circle` share is `Figure.prototype`. Consequently the expression `c instanceof Rect` yields `false`. Just try `c instanceof Figure`. Prototypes are just ordinary objects. There is nothing special about them. — , Jun 28 '16 at 19:34
@Maximus no, there is no `constructor` property on instances. You should indeed remove them (especially since they're unlabelled). The `constructor` property should sit on the respective prototype object (to be inherited by the instances). However, the only object created by your code that actually owns a `.constructor` property is `Figure.prototype`. That's why `(new Circle).constructor === Figure` :-) See [here](http://stackoverflow.com/questions/8453887/why-is-it-necessary-to-set-the-prototype-constructor) if you don't want that — Bergi, Jun 28 '16 at 19:35
@Bergi, ok, thanks, removed. So is my understanding of the mechanics of the `instanceof` operator incorrect? — Max Koretskyi, Jun 28 '16 at 19:41
`object inctanceof Constructor` is equivalent to `Constructor.prototype.isPrototypeOf(object)` — , Jun 28 '16 at 19:43
Javascript has evolved up to version 6 and still such fundamental prototype question get so much attention - unbelievable! — , Jun 28 '16 at 19:48
@Maximus: No, `instanceof` has nothing to do with the `.constructor` property, I just wanted to point it out. You should accept Tamas' answer which explains what else is wrong — Bergi, Jun 28 '16 at 19:59

Tamas Hegedus · Accepted Answer · 2016-06-28T19:54:02.193

Your logic is right, but the initial assumptions were a bit wrong. It is possible to emulate regular class based inheritance with prototypes.

To reproduce the structure you have drawn us, I created the following code:

function Figure() {}
function Rect() {}
function Square() {}

function Ellipse() {}
function Circle() {}

Ellipse.prototype = Rect.prototype = new Figure();

Square.prototype = new Rect();
Circle.prototype = new Ellipse();

console.log("is Figure: " + (new Circle() instanceof Figure));
console.log("is Ellipse: " + (new Circle() instanceof Ellipse));
console.log("is Rect: " + (new Circle() instanceof Rect));

As you can see, new Circle() instanceof Rect returns true as you provisioned. The problem is that by setting Ellipse.prototype and Rect.prototype to the same object, they basically become the same type (with multiple constructors).

So how do you fix it? Create different Figure instances for prototypes, like this:

function Figure() {}
function Rect() {}
function Square() {}

function Ellipse() {}
function Circle() {}

Ellipse.prototype = new Figure();
Rect.prototype = new Figure();

Square.prototype = new Rect();
Circle.prototype = new Ellipse();

console.log("is Figure: " + (new Circle() instanceof Figure));
console.log("is Ellipse: " + (new Circle() instanceof Ellipse));
console.log("is Rect: " + (new Circle() instanceof Rect));

And now the result is what everyone would expect.

EDIT

I've redrawn your picture and drawn another one which illustrates how the objects really are based on your textual example, which is the same as my second code.

The original one: I highlighted the references which are taken in the expression Rect.prototype === new Circle().__proto__.__proto__:

The second one:

PS

Today in 2016, not Circle.prototype = new Ellipse() is the way you should implement inheritance, but use the standard class inheritance instead:

class Figure {}
class Rect extends Figure {}
class Square extends Rect {}
class Ellipse extends Figure {}
class Circle extends Ellipse {}

console.log("new Circle is Figure: " + (new Circle() instanceof Figure));
console.log("new Circle is Rect: " + (new Circle() instanceof Rect));

Another way would be to [use Object.create](http://stackoverflow.com/a/17393153/3928341) — nem035, Jun 28 '16 at 19:24
I also get `console.log("is Rect: " + (new Circle() instanceof Rect));` to equal `false` if I run my code. My question is where my misunderstanding is in the mechanics of the checking algorithm of the `instanceof` operator — Max Koretskyi, Jun 28 '16 at 19:30
@nem035: In fact that's not just "another" way but rather the only correct one :-) — Bergi, Jun 28 '16 at 19:32
@nem035 @Bergi I couldn't agree more. This example is just to demonstrate the difference, not a full tutorial about implementing inheritance. There are plenty of them out there, and I dont see the point of correctly setting `constructor` properties on prototype objects created by `Object.create`. — Tamas Hegedus, Jun 28 '16 at 19:37

score 4 · Answer 2 · answered Jun 28 '16 at 19:43

Given the example code in your question, c.__proto__.__proto__ === Rect.prototype returns false. new Figure is called twice, and creates two different Figure instances.

Different object instances are not equal.

function Figure() {}

function Rect() {}
Rect.prototype = new Figure();

function Square() {}
Square.prototype = new Rect();

function Ellipse() {}
Ellipse.prototype = new Figure();

function Circle() {}
Circle.prototype = new Ellipse();

var c = new Circle();

console.log('c instanceof Rect:', c instanceof Rect);

console.log('c.__proto__ === Rect.prototype', c.__proto__ === Rect.prototype);

console.log('c.__proto__.__proto__ === Rect.prototype', c.__proto__.__proto__ === Rect.prototype);

score 3 · Answer 3 · answered Jun 28 '16 at 20:04

The fact that Circles and Squares both have a Figure in their prototype chains means that c instanceof Figure and s instanceof Figure are both true, but they each have their own Figure, because new Figure() was called twice. Note that new Figure() != new Figure(), since objects in Javascript are never equal to other objects. Here is an update to your diagram showing what is actually going on in your code above. You can see that Circles and Squares each have a distinct Figure in their prototype chains:

Notice that you could change your code slightly, so that you reuse one figure as the prototype for both Rect and Ellipse, which would equate to the diagram in your original post, and would result in exactly the behaviour you expected to see:

function Figure() {}
var f = new Figure();

function Rect() {}
Rect.prototype = f;

function Square() {}
Square.prototype = new Rect();

function Ellipse() {}
Ellipse.prototype = f;

function Circle() {}
Circle.prototype = new Ellipse();

console.log( (new Circle) instanceof Rect ); // true

Understanding prototype inheritance

3 Answers3