CODEWITHSUNDEEP
javascriptprototypeinstantiation
shmuli
shmuli

Reputation: 5192

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

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?

Upvotes: 21

Views: 948

Answers (2)

ChadF
ChadF

Reputation: 1758

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.

Upvotes: 11

joews
joews

Reputation: 30310

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

Upvotes: 22

Related Questions