CODEWITHSUNDEEP
javascriptprototype
Eric Yang
Eric Yang

Reputation: 1022

Why the prototype not equal with Object.create()

According to the official demo The Object.create() method creates a new object with the specified prototype object and properties.

With the following code, why the prototype not equal??

function Shape() {}

function Rectangle() {}

Rectangle.prototype = Object.create(Shape.prototype);
console.log(`${Shape.prototype === Rectangle.prototype}`) // false

Why Shape.prototype === Rectangle.prototype is false

Upvotes: 1

Views: 270

Answers (4)

Michael Geary
Michael Geary

Reputation: 28850

When you use === on two object references (names) such as Rectangle.prototype and Shape.prototype, you are testing whether both references actually refer to the very same object. If you have two distinct objects that happen to contain the same values inside them, or two distinct objects where one is the prototype of the other, they will not compare equal.

Your call to Object.create() creates a new object. It will never compare equal to any other object. Rectangle.prototype is a brand new object you've just created. It's not a reference to the same object as Shape.prototype. The prototype of Rectangle.prototype is Shape.prototype, but that doesn't make them the same object. So they will compare unequal.

By way of contrast, suppose you had done this:

Rectangle.prototype = Shape.prototype;

Now Rectangle.prototype and Shape.prototype are both references to the same object, because that's what the = operator does. Unlike Object.create(), the = operator doesn't create a new object, only a new reference to the same object. If you then use === to compare them, they will compare equal, because the two names literally refer to the very same object.

Upvotes: 1

Shivanand Patil
Shivanand Patil

Reputation: 51

You can not compare objects using === or ==. You need to write the function to check for every single property plus the number of properties to check equality of the object. you can read about it here --

Object comparison in JavaScript

Upvotes: 0

Matías Fidemraizer
Matías Fidemraizer

Reputation: 64933

From MDN:

The Object.create() method creates a new object with the specified prototype object and properties.

Rectangle.prototype is an object whose prototype is Shape.prototype. That is, Rectangle.prototype != Shape.prototype.

In the other hand:

function Shape() {}

function Rectangle() {}

Rectangle.prototype = Object.create(Shape.prototype)

// true
console.log(Object.getPrototypeOf(Rectangle.prototype) == Shape.prototype)

In addition, you may use instanceof to verify that a given object is an instance of some prototype:

function Shape() {}

function Rectangle() {}

Rectangle.prototype = Object.create(Shape.prototype)


console.log(Rectangle.prototype instanceof Shape)

Upvotes: 1

Suren Srapyan
Suren Srapyan

Reputation: 68635

You have an intermediate object here. Object.create has this signature

Object.create(proto)

where proto is the object which should be the prototype of the newly-created object.

Rectangle.prototype refers to an object which prototype has set to the Shape.prototype. When you use === you compare their references, which are different, so why you get false.

See the visualization

                        -------          -----
Rectangle.prototype ->  |     |          |   |
                        |proto|  ------> -----   
                        -------            ^  
                                           |
Shape.prototype ----------------------------

Upvotes: 1

Related Questions