CODEWITHSUNDEEP
javascript
Benny Thadikaran
Benny Thadikaran

Reputation: 1201

Difference between Object.create(Parent.prototype) vs Object.create(Parent) during prototype inheritance

In typical JavaScript inheritance, we pass the Parent.prototype to Object.create.

function Parent() {};

function Child() {
    Parent.call(this);
}

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

var foo = new Child();

Is there a difference calling Object.create(Person) vs Object.create(Parent.prototype).

Many tutorials including the MDN article linked below pass "Parent.prototype" instead of just "Parent".

As per MDN definition "The Object.create() method creates a new object, using an existing object as the prototype of the newly created object."

I tried both ways and console.log shows the same result with both approaches.

A similar question was answered here but doesn't clarify this difference.

var o = Object.create(Object.prototype); // same as var o = {};

Upvotes: 2

Views: 214

Answers (2)

dinesh ranawat
dinesh ranawat

Reputation: 253

Child.prototype = Object.create(Parent.prototype) will form a different prototype chain as compared to Child.prototype = Object.create(Parent)

With Child.prototype = Object.create(Parent.prototype)

the prototype chain of foo would be Child.prototype ---> Parent.prototype ----> Object.prototype

simple explanation

  • foo is created from Child, so its prototype is Child.prototype
  • Child.prototype is created from Object.create(Parent.prototype), so its prototype is Parent.prototype.
  • Parent.prototype is created from Object, so it's prototype is Object.prototye
  • prototype of Object.prototype is null. This is where the chain end.

With Child.prototype = Object.create(Parent);

the prototype chain of foo would be different as below Child.prototype ---> Parent ----> Function.prototype ----> Object.prototype

simple explanation

  • foo is created from Child, so its prototype is Child.prototype
  • Child.prototype is created from Object.create(Parent), so its prototype is Parent
  • Parent is created from Function, so its prototype is Function.prototype
  • Function.prototype is created from Object, so its prototype is Object.prototype
  • prototype if Object.prototype is null. This is where the chain end.

You can further verify the prototype chain in each case by calling. name is defined in Function.prototype.

console.log(foo.name);

For the first case, you will get undefined because Function.prototype is not in the prototype chain whereas in the second case you will get "Parent" as the output of console.log

Upvotes: 0

nick zoum
nick zoum

Reputation: 7285

You usually want to be using Object.create(prototype) for creating an object from another object and Object.create(Class.protoype) for creating an object from a function.

Doing Object.create(Class) will use the function as a template, meaning only the "static" fields will be transferred to the new object. Object.create(Class.protoype) will use the prototype as the template, thus you will be able to get all fields that were declared using Class.prototype.field, you can also get the static fields through the constructor, and finally, once the constructor function is run on the new object the fields declared inside the constructor will also be created. 

function Foo() {
  // Only visible by prototype after running constructor
  this.test = function() {};
}
Foo.prototype.bar = "Bar"; // Visible by prototype
Foo.fooBar = "FooBar"; // Visible by class

var classFoo = Object.create(Foo);
var protoFoo = Object.create(Foo.prototype);

// fooBar is static, so it can be viewd bu classFoo
console.log(classFoo.fooBar); 
// bar was added to the prototype, cant be viewed
console.log(classFoo.bar); 
// test is declared in the constructor, to which there is no pointer from classFoo
console.log(classFoo.test); 
// this constructor is the base constructor for all classes
console.log(classFoo.constructor); 

// fooBar was added to the constructor, so it cannot be viewed this way
console.log(protoFoo.fooBar); 
// but it can be viewed like this
console.log(protoFoo.constructor.fooBar); 
// this is the Foo function/constructor
console.log(protoFoo.constructor); 
// bar is added to the prototype so it can be viewed
console.log(protoFoo.bar); 
// test has not been declared yet as the constructor has not been run yet
console.log(protoFoo.test);
// the foo function is run with protoFoo as this
protoFoo.constructor();
// the test function has now been added to protoFoo
console.log(protoFoo.test);

Upvotes: 0

Related Questions