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.