I have the following:
function Person() {
console.log('person');
}
function Player() {
this.personConstructor();
}
Player.prototype = Person.prototype;
Player.prototype.constructor = Player;
Player.prototype.personConstructor = Person.prototype.constructor;
new Player();
The intent is to inherit from Person into Player then have that new child class call the parent's original constructor. However, this causes an infinite loop. What am I doing wrong and why is the loop happening?
This line right here is your problem:
Player.prototype = Person.prototype;
You want the prototype for Player to inherit from Person's prototype, but not make them equal. Currently, your code makes the Player and Person prototypes reference equal, so any changes to Player.prototype also affect the Person.prototype (effectively making them indistinguishable).
You're looking for:
Player.prototype = Object.create(Person.prototype);
Object.create instantiates a new object with a given prototype without actually calling the constructor (unlike a regular new Person() call would do). This allows you to get a new object inheriting the Person prototype, which you can then modify for the specifics of a Player.
EDIT: As suggested in the comments by Siddarth, an even better solution would be to set the constructor through a property descriptor:
Player.prototype = Object.create(Person.prototype, {
constructor: { value: Player }
});
This way, the newly created prototype will have its constructor property made non-configurable, non-enumerable and non-writable. This prevents you from accidentally changing it afterwards through an assignment (e.g. Player.prototype.constructor = Foo) and it won't show up in Object.keys or a for..in loop. Normally, this shouldn't matter much but it's a good practice.
Object.create. I personally prefer using classical assignment or something like _.extend for adding properties to a prototype. Property descriptors may be better though, your solution prevents the prototype's constructor from (accidentally) getting changed later on. Thanks for the tip!function Person(args) {
console.log('person');
args=args||{};
this.name=args.name||"no name";
}
function Player(args) {
// this.personConstructor();
// I prefer
Person.call(this,args);
}
Player.prototype = Object.create(Person.prototype);
Player.prototype.constructor = Player;
console.log(new Player());
console.log(new Player({name:"Jon"}));
It may be better to just re use Parent constructor with the following
Person.call(this,args);
Because if you use something like this.parent()... you'll get an infinite loop when you inherit 3 levels deep.
More on prototype and constructor functions here.
this.personConstructor() works fine, no need for .call if you're going to pass in the same this. However, Person.call(this,args) is indeed a more general solution which doesn't need the extra Player.prototype.personConstructor definition.
Player.prototype = Person.prototype;should bePlayer.prototype = Object.create(Person.prototype);Player.prototypea reference toPerson.prototypeand then assignedPlayertoPlayer.prototype.constructor, you were actually assigning it toPerson.prototype.constructor. So thenpersonConstructorwas actually a reference toPlayerinstead ofPerson, and so created the infinite call loop.