What does Object.create( Class.prototype ) do in this code?

Question

I'm reading about the mixin pattern in javascript and I encountered this piece of code that I don't understand:

SuperHero.prototype = Object.create( Person.prototype );

There is actually a typo in the original code (the uppercase H). If I downcase it it works. However, if I actually delete the line everything seems to work the same.

Here is the full code:

var Person =  function( firstName , lastName ){
  this.firstName = firstName;
  this.lastName =  lastName;
  this.gender = "male";
};

// a new instance of Person can then easily be created as follows:
var clark = new Person( "Clark" , "Kent" );

// Define a subclass constructor for for "Superhero":
var Superhero = function( firstName, lastName , powers ){

    // Invoke the superclass constructor on the new object
    // then use .call() to invoke the constructor as a method of
    // the object to be initialized.

    Person.call( this, firstName, lastName );

    // Finally, store their powers, a new array of traits not found in a normal "Person"
    this.powers = powers;
};

SuperHero.prototype = Object.create( Person.prototype );
var superman = new Superhero( "Clark" ,"Kent" , ["flight","heat-vision"] );
console.log( superman ); 

// Outputs Person attributes as well as powers

What does SuperHero.prototype = Object.create( Person.prototype ); do?

Answer 1

It creates a new object that inherits from the Person constructor's prototype object.

It would be just like if you did this.

SuperHero.prototype = new Person();

Except that it creates the Person instance without actually invoking the code in the Person constructor.

This object is used as the prototype object of the SuperHero constructor, so that when you create a SuperHero instance, it will inherit all the prototyped properties of Person, as well as any prototyped properties added directly to the SuperHero prototype object.

Answer 2

It does exactly as the docs state:

Creates a new object with the specified prototype object and properties.

The proto in this case is Person:

The parameter states the following:

The object which should be the prototype of the newly-created object.

Your code Object.create( Person.prototype ); returns an object that copies the properties (in this case the firstName, lastName, and gender) of a person and assigns them to a SuperHero.

Note the similarities between a Person and a SuperHero they both contain a firstName and a lastName. Note also the differences, the Person contains a gender property while your SuperHero contains a powers property.

Answer 3

SuperHero.prototype = Object.create( Person.prototype );

This is basically letting SuperHero inherit all of the properties/prototypes of Person. It is almost the same as using new, but in the new ECMAScript 5 *Object.create()` way. This could also be written like so, if it helps understand it any more.

SuperHero.prototype = new Person();

I don't like linking the prototypes specifically, because it means the two prototypes are intertwined, and I prefer to have one be the SubClass, one the SuperClass.

A good way to see them yourself is do something like this. Here you can really see the inheritance that SuperHero is getting from Person. Notice it has all of the properties (first/last/etc), and it's additional Powers.

jsFiddle demo

var person = new Person();
SuperHero.prototype = person; // inheritance here
// the Object.create way is ECMAScript 5 (which not all browsers support yet sadly)

var superman = new SuperHero( "Clark" ,"Kent" , ["flight","heat-vision"] );
console.log( person );
console.log( superman ); ​