How does the "instanceof" operator work?

JavaScript
1

Tell us what’s happening:

How does theinstanceof operator infer that a parent object, is a child object’s constructor, without explicitly setting the constructor property inside parent.prototype?

I understand that by overwriting Dog.prototype with a new object (to improve inheritance efficiency), we end up losing the preset constructor property. Consequently we have to manually recreate the constructor property via constructor: Dog.

What I’m confused about is that Child instanceof Parent still returns true with or without manually re-entering the constructor property into Parent.prototype.

For example, let say we create a child called “puppy” via const puppy = new Dog(), Now puppy instance of Dog without us manually entering the constructor property as Dog inside Dog.prototype, still returns true.

How does instanceof infer that Dog is puppy’s constructor when the constructor property inside Dog.prototype is non-existent/empty? What property is instanceof reading?

Your code so far

function Dog(name) {
  this.name = name;
}

// Only change code below this line
Dog.prototype = {
  **constructor: Dog,**
  numLegs: 4,
  eat: function() {
    console.log("nom nom nom");
  },
  describe: function() {
    console.log("My name is " + this.name);
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/109.0

Challenge: Object Oriented Programming - Remember to Set the Constructor Property when Changing the Prototype

Link to the challenge:

2

So instanceof checks if the value on the left hand side was created by the function on the right hand side (or a function that inherits from that in the prototype chain).

puppy was clearly created by the function Dog, so puppy instanceof Dog is true. If you don’t explicitly include the constructor property, the runtime will default to inferring that the object puppy was constructed using the function Dog.

If it didn’t do that, IRL you’d have to write this stuff out every time you did any JS coding. But you don’t, the language handles it fine. It is likely that this is the only time you’ll explicitly code like this: the course needs to explain how this part of the language works by doing that.

3

Thank you . Your explanation is clear and I appreciate it.

  • I assumed that instanceof had to read an explicit object property.

  • I now understand that the runtime handles the prototype inheritance logic.

  • I also realize that instanceof acts as an operator and not an object method that has to explicitly read the value of an object property.

4

The instanceof operator checks if an object’s prototype chain contains the prototype property of a constructor. It does not rely on the constructor property explicitly being set in the prototype object.

Instead, the instanceof operator checks the internal [[Prototype]] property of an object to determine its prototype chain. The [[Prototype]] property is set automatically when you use the new operator to create an instance of an object, and it is not affected by changes to the constructor property of the prototype object.

In your code example, when you create a puppy object using const puppy = new Dog(), the [[Prototype]] property of puppy is automatically set to Dog.prototype. So, when you run puppy instanceof Dog, the instanceof operator checks the [[Prototype]] property of puppy and finds that it is Dog.prototype, so it returns true.

Even if you remove the constructor: Dog line from the Dog.prototype object, the instanceof operator would still work as expected because it relies on the [[Prototype]] property, not the constructor property.

1 Like
5

Thank you for the excellent explanation.