Si usa this , el motor primero intentará acceder a la propiedad en la instancia misma. Si no existe en la instancia, irá al prototipo ( Footballer.prototype ). Si no existe allí, irá a Human.prototype para ver si la propiedad existe.

Si usa super , irá inmediatamente a la clase principal, Human.prototype , para ver si la propiedad existe, y irá hacia arriba desde allí (en lugar de pasar primero por la instancia y el prototipo secundario).

Será especialmente importante tener esto en cuenta si existe un método con el mismo nombre tanto en el padre como en el hijo, lo cual no es raro.

 class Human { mouse () { console.log('parent class'); } } class Footballer extends Human { mouse() { console.log('child class'); } talk () { super.mouse(); this.mouse(); } } const f = new Footballer(); f.talk();

Existe una gran diferencia. En lenguajes como Java y Javascript, con super está accediendo a las propiedades y métodos de los padres.

Con this está accediendo a las propiedades y métodos del niño.

this.mouse() funciona porque primero se accede a la propiedad del mouse para el niño (Futbolista) y cuando no se encuentra, la propiedad se busca en el padre (Humano). Así es como funciona la herencia. Al acceder a una propiedad llamada x , Javascript intentará moverse hacia arriba en la cadena de prototipos hasta que encuentre una propiedad llamada x .

Si define una propiedad como kick solo en Footballer, entonces super.kick() no funcionará, pero this.kick() sí, lo que demuestra la diferencia.

 class Human { constructor (name, age) { this.name = name; this.age = age; } mouse (sentense) { console.log(`${this.name}: "${sentense}".`); } } class Footballer extends Human { constructor(name, age, position, team) { super(name, age); this.team = team; this.position = position; } kick(){ console.log("kicked"); } play(){ this.kick(); super.kick(); } talk (sentense) { super.mouse(sentense); // This works. this.mouse(sentense); // This also works. } } const messi = new Footballer(); messi.play();