Why the prototype not equal with Object.create()

Question

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

That would mean `Object.create(Shape.prototype) === Shape.prototype`. Do you think `Object.create` should do nothing? =) — Ry-, Jan 30 '18 at 09:47
Because [it's a good thing](https://stackoverflow.com/questions/17392857/benefits-of-using-object-create-for-inheritance) that they're not the same! — Bergi, Jan 30 '18 at 09:50
If you’re interpreting “creates a new object with the specified prototype object and properties” as meaning “copies the properties from this object into a new one”, it’s time to read about prototypes! https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes Though that behaviour wouldn’t make the objects `===` either. — Ry-, Jan 30 '18 at 09:51

Suren Srapyan · Answer 1 · 2018-01-30T09:53:32.770

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 ----------------------------

Michael Geary · Answer 2 · 2018-01-30T10:09:21.083

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.

Matías Fidemraizer · Accepted Answer · 2018-01-30T09:56:19.727

1

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)

edited Jan 30 '18 at 09:56

answered Jan 30 '18 at 09:50

Matías Fidemraizer

63,804
18
124
206

@ygweric Because you can't access the prototype of an object directly. `Shape.prototype.prototype` is `undefined` – Matías Fidemraizer Jan 30 '18 at 09:53
@ygweric The ordinary `.prototype` property is not the internal [[prototype]] from which properties are inherited. You'd use `Object.getPrototypeOf` to access that. – Bergi Jan 30 '18 at 09:53
@ygweric: The prototype of an object is not a property named `prototype`. (That property *on a constructor* determines the prototype of objects created by that constructor.) You would check `Object.getPrototypeOf(Shape.prototype) === Rectangle.prototype`. – Ry- Jan 30 '18 at 09:53
console.log(Shape.prototype === Rectangle.prototype.__proto__) – Pipo Aug 26 '21 at 21:58

score 0 · Answer 4 · answered Jan 30 '18 at 09:56

0

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

answered Jan 30 '18 at 09:56

Shivanand Patil

51
3

Your right. That is why I mentioned that comparison needs to be done. The link is there to help with the code of comparison for an object. The link gives an extra info how to write the code that is why even the link is gone answers is good enough – Shivanand Patil Feb 07 '18 at 12:37

Why the prototype not equal with Object.create()

4 Answers4