Instance of keyword in Javascript

Question

How does rect is an instance of Shape? Shape constructor is not on the prototype chain of rect.

rect.__proto__ : Rectangle.prototype
Rectangle.prototype : Object.prototype

// Shape - superclass
function Shape() {
  this.x = 0;
  this.y = 0;
}

// superclass method
Shape.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  console.info('Shape moved.');
};

// Rectangle - subclass
function Rectangle() {
  Shape.call(this); // call super constructor.
}

// subclass extends superclass
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

var rect = new Rectangle();

console.log('Is rect an instance of Rectangle?', rect instanceof Rectangle); // true
console.log('Is rect an instance of Shape?', rect instanceof Shape); // true
rect.move(1, 1); // Outputs, 'Shape moved.'

What are the conditions for an object to be an instance of a Constructor?

It's not the constructor that's important, it's the prototype, and the Shape prototype is put on the prototype chain of Rectangle by the code you posted. — Pointy
– Pointy, Commented Jul 18, 2018 at 12:31
Tnx @Pointy, but there are two points that makes me vague.1,constructor property is changed 2, Object.create() doesn't link to Shape.prototype rather creates a copy of Shape prototype. — user10025500
– user10025500, Commented Jul 18, 2018 at 12:35
No, Object.create(Shape.prototype) creates a new object with Shape.prototype as its prototype link. It does not create a copy of the Shape prototype; read the documentation. — Pointy
– Pointy, Commented Jul 18, 2018 at 12:38

Andrei Yanovich · Accepted Answer · 2018-07-18 12:58:26Z

1

The instanceof operator tests that the constructor.prototype (Rectangle for example) is in object's prototype chain.

rect instanceof Rectangle

Is true because:

Object.getPrototypeOf(rect) === Rectangle.prototype

Please see more information here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof

Also, you can trace this logic in the standard: https://www.ecma-international.org/ecma-262/6.0/#sec-function.prototype-@@hasinstance:

v instanceof F

evaluates as

F[@@hasInstance](v)

In the same time https://www.ecma-international.org/ecma-262/6.0/#sec-ordinaryhasinstance:

4. Let P be Get(C, "prototype")
7.a Let O be O.[[GetPrototypeOf]]().
7.d If SameValue(P, O) is true, return true.

answered Jul 18, 2018 at 12:58

Andrei Yanovich

665 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

score 1 · Accepted Answer · 2018-07-18 13:07:45Z

1

Ok I got it.

Here is the prototype chain.

rect__proto__: Rectangle. prototype
Rectangle.prototype.__proto__: Shape.prototype

edited Jul 18, 2018 at 13:07

answered Jul 18, 2018 at 12:43

user10025500

Collectives™ on Stack Overflow

Instance of keyword in Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related