JavaScript类继承无限循环

Question

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?

Answer 1

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 (eg 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.

Answer 2

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 .