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?
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.
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.
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 );
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With