原型继承时 Object.create(Parent.prototype) 和 Object.create(Parent) 的区别

Question

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 = {};

Answer 1

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

Answer 2

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