Javascript: Still confused by the instanceof operator

Question

This article defines instanceof as below:

The instanceof operator tests whether an object has in its prototype chain the prototype property of a constructor.

That's a fair explanation and life was good until I came across this code from the book Eloquent Javascript:

function TextCell(text) {
  this.text = text.split("\n");
}

TextCell.prototype.minWidth = function() {
  return this.text.reduce(function(width, line) {
    return Math.max(width, line.length);
  }, 0);
}

TextCell.prototype.minHeight = function() {
  return this.text.length;
}

TextCell.prototype.draw = function(width, height) {
  var result = [];
  for (var i = 0; i < height; i++) {
    var line = this.text[i] || "";
    result.push(line + repeat(" ", width - line.length));
  }
  return result;
}

function RTextCell(text) {
  TextCell.call(this, text);
}

RTextCell.prototype = Object.create(TextCell.prototype);

RTextCell.prototype.draw = function(width, height) {
  var result = [];
  for (var i = 0; i < height; i++) {
    var line = this.text[i] || "";
    result.push(repeat(" ", width - line.length) + line);
  }
  return result;
};

Let's create an instance of RTextCell and execute the below c

var rt = new RTextCell("ABC");
console.log(rt instanceof RTextCell); // true
console.log(rt instanceof TextCell); // true

I understand why the output of the 2nd console.log is "true" - because constructor TextCell is part of the prototype chain.

However the 1st console.log confuses me.

If you look at the code (10th line from bottom), the prototype of RTextCell is updated to a new Object, whose prototype is set to TextCell.prototype.

RTextCell.prototype = Object.create(TextCell.prototype);.

Looking at the snapshots below, there is no mention of constructor "RTextCell" in the prototype chain of the object "rt". So, going by the definition which I mentioned at the beginning of my post, shouldn't the output be false? Why does it returns a true value?

I also read this but didn't help me to understand this specific problem.

See below for the snapshots of rt, RTextCell, TextCell in that order.

snapshot of "rt" snapshot of RTextCell snapshot of TextCell

It's a really well structured question. You showed all your previous investigation, hope you get very good answers. — Erick Petrucelli, May 22 '15 at 11:54
Oh! I should add. I checked this prototype chain tree in the above snapshots on both chrome 43.0.2357.65 and firefox 33.1.1. — Harish, May 22 '15 at 11:54

score 4 · Answer 1 · answered May 22 '15 at 12:02

You do change RTextCell.prototype, but you change it before you construct any RTextCell instances. Consider this massively different example, where RTextCell.prototype is modified after an instance is created with the original prototype:

var rt = new RTextCell();
RTextCell.prototype = somethingTotallyDifferent;
rt instanceof RTextCell; // false!

When rt is created, it is true that rt.__proto__ === RTextCell.prototype. Once RTextCell.prototype changes, that stops being true.

You're not testing if rt has the original prototype property from RTextCell in its prototype chain. Rather, you're testing if the value of RTextCell.prototype right now exists in the object's prototype chain. That will always be true for RTextCell instances, because instances created by the RTextCell constructor always get the current value of RTextCell.prototype in their prototype chain, and you never change RTextCell.prototype after you start constructing instances.

In addition to the answer from @Dark Falcon, your example on setting the prototype to "somethingTotallyDifferent" helped me. This make sense. Thanks. — Harish, May 22 '15 at 12:44

Woody · Answer 2 · 2015-05-22T12:06:30.393

obj instanceof RTextCell

is testing whether RTextCell.prototype is present in the prototype chain of obj. It is since obj was made using new RTextCell. The fact that RTextCell.prototype has as it's prototype TextCell.prototype is beside the point here and seems to be throwing you.

RTextCell.prototype = Object.create(TextCell.prototype);

doesn't get rid of RTextCell.prototype, it's still an object, but it's prototype happens to be TextCell.prototype.

score 1 · Accepted Answer · answered May 22 '15 at 12:02

1

The exact wording is important. You talk about the constructor being in the prototype chain, but the original quote doesn't:

The instanceof operator tests whether an object has in its prototype chain the prototype property of a constructor.

So the expression rt instanceof RTextCell actually is testing something like this (keeping in mind that __proto__ is not standard):

var p = rt.__proto__;
while(p)
{
  if(p == RTextCell.prototype)
    return true;
  p = p.__proto__;
}
return false;

So even though the function RTextCell is not referenced directly in the object trees above, the RTextCell.prototype object is.

answered May 22 '15 at 12:02

Dark Falcon

43,592
5
83
98

or in a single expression, `RTextCell.prototype.isPrototypeOf(rt)` :-) – Bergi May 22 '15 at 12:07
@Dark Falcon: Earlier I was confused at the instanceof operator and isPrototypeOf() and when I looked at the word "constructor" in definition on MDN site I totally misunderstood. You answer made me to pause for a sec and realize what I missed. "The wording". Now it make sense. And I also just read [this].(http://stackoverflow.com/questions/18343545/javascript-isprototypeof-vs-instanceof-usage) for difference between instanceof and isPrototypeOf(). Thanks mate. – Harish May 22 '15 at 12:43

Javascript: Still confused by the instanceof operator

3 Answers3