如何在子原型中重写父原型 function？

Question

I'm learning prototypes in JS and I have troubles trying to rewrite my parent prototype function in my child prototype.

In the code below, I'm trying to rewrite the function presentation from my class Personn in order to display the new Etudiant property 'etablissement' as well.

 function Personne(nom, age, sexe){ this.nom = nom; this.age = age; this.sexe = sexe; } Personne.prototype.presentation = function() { return 'Bonjour, je suis ', this.nom + ', ' + this.sexe + ' de ' + this.age + ' ans.'; } function Etudiant(nom, age, sexe, etablissement){ Personne.call(this, [nom, age, sexe]); this.etablissement = etablissement; } Etudiant.prototype = Object.create(Personne.prototype); Etudiant.prototype.constructor = Etudiant; Etudiant.prototype.presentation = function (){ return Personne.prototype.presentation.call(this) + ' Je travaille au ' + this.etablissement + '.'; }; let patrick = new Etudiant('patrick', 26, 'etoile de mer', 'Club'); console.log(patrick.presentation()); // this displays 'patrick,5651,etoile de mer, undefined de undefined ans. Je travaille au Club.'

Answer 1

The problem is here:

Personne.call(this, [nom, age, sexe]);

With call , you pass discrete arguments, not an array of arguments. Either change that to use apply , which does take an array (or any array-like):

Personne.apply(this, [nom, age, sexe]);

or make the arguments discrete:

Personne.call(this, nom, age, sexe);

Live Example:

 function Personne(nom, age, sexe){ this.nom = nom; this.age = age; this.sexe = sexe; } Personne.prototype.presentation = function() { return 'Bonjour, je suis ', this.nom + ', ' + this.sexe + ' de ' + this.age + ' ans.'; } function Etudiant(nom, age, sexe, etablissement){ Personne.call(this, nom, age, sexe); this.etablissement = etablissement; } Etudiant.prototype = Object.create(Personne.prototype); Etudiant.prototype.constructor = Etudiant; Etudiant.prototype.presentation = function (){ return Personne.prototype.presentation.call(this) + ' Je travaille au ' + this.etablissement + '.'; }; let patrick = new Etudiant('patrick', 26, 'etoile de mer', 'Club'); console.log(patrick.presentation()); // this displays 'patrick,5651,etoile de mer, undefined de undefined ans. Je travaille au Club.'

---

Side note: If you're going to use constructor functions and the prototype property, in modern JavaScript (ES2015+) you can do that more easily with class syntax:

 class Personne { constructor(nom, age, sexe){ this.nom = nom; this.age = age; this.sexe = sexe; } presentation() { return 'Bonjour, je suis ', this.nom + ', ' + this.sexe + ' de ' + this.age + ' ans.'; } } class Etudiant extends Personne { constructor(nom, age, sexe, etablissement) { super(nom, age, sexe); this.etablissement = etablissement; } presentation() { return super.presentation() + ' Je travaille au ' + this.etablissement + '.'; } } let patrick = new Etudiant('patrick', 26, 'etoile de mer', 'Club'); console.log(patrick.presentation()); // this displays 'patrick,5651,etoile de mer, undefined de undefined ans. Je travaille au Club.'

It creates effectively the same thing (there are some minor differences, the main one being the constructors can't be called as normal functions — which you usually don't want them to be). Importantly, it still uses prototypical inheritance, constructor functions, and the prototype property; the syntax just makes it easier to set things up, and more declarative.