Why do Object.create() and new Object() evaluate to different prototypes?

Question

Why do these 2 implementations behave differently? What exactly sets them apart when it comes to evaluating their prototypes?

Creating an object with the prototype specified:

   function Foo() {}

   // creates an object with a specified prototype
   var bar = Object.create(Foo);

   console.log(Object.getPrototypeOf(bar)); // returns: function Foo(){}
   console.log(Foo.isPrototypeOf(bar)); // returns: true

Creating an object with the constructor method:

   function Foo() {}

   // creates an object with the constructor method    
   var bar = new Foo();

   console.log(Object.getPrototypeOf(bar)); // returns: Foo {}
   console.log(Foo.isPrototypeOf(bar)); // returns: false

Also, why does the second implementation return both Foo {} and false?

"Also, why does the second implementation return both Foo {} and false?" is a great question. I've updated my answer to address it. — joews
– joews, Commented Apr 12, 2015 at 19:27
Note that you would usually do var bar = Object.create( Foo.prototype );, which gives you the expected behaviour. — Paul
– Paul, Commented Apr 12, 2015 at 22:02
possible duplicatet of Understanding the difference between Object.create() and new SomeFunction() — Bergi
– Bergi, Commented Apr 13, 2015 at 0:11

joews · Accepted Answer · 2015-04-12 19:36:28Z

22

Object.create(Foo) means "create an object with Foo as the prototype".

new Foo() means "Create an object with Foo.prototype as the prototype and Foo as the constructor".

Therefore Foo is the prototype of Bar in the first example and the constructor of Bar in the second example.

I think the second part of your question is prompted by misleading console output - Object.getPrototypeOf(bar) actually returns Foo.prototype, not Foo:

function Foo() {}
var bar = new Foo();

Object.getPrototypeOf(bar) === Foo
// -> false

Object.getPrototypeOf(bar) === Foo.prototype
// -> true

edited Apr 12, 2015 at 19:36

answered Apr 12, 2015 at 19:20

joews

30.4k11 gold badges82 silver badges91 bronze badges

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

Comments

ChadF · Accepted Answer · 2015-04-12 19:36:47Z

When you use the 'new' keyword to instantiate an object JavaScript actually adds in two lines of code to your object.

If you intend to create an object with pseudoclassical instantiation you create your object like this:

var Foo = function() {
this.property = 'baz';
};

When you call var bar = new Foo() Javascript runs Foo as the following:

var Foo = function() {
// ADDED CODE: var this = Object.create(Foo.prototype);
this.property = 'baz';
// ADDED CODE: return this;

Using Object.create creates a delegation relationship from the newly created object to the specified object, so in your first case bar is delegating its lookups to Foo, but in the second case the lookups are delegated to Foo.prototype.

You may find this blog post interesting. It goes into Pseudoclassical instantiation (using the new keyword) as opposed to Prototypal instantiation, which does not use the new keyword.

Collectives™ on Stack Overflow

Why do Object.create() and new Object() evaluate to different prototypes?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related