Is there any differences between "this" and "super" when accessing parent class' property?

Question

I always think "super" is the only way to access parent class' property, but i realized that "this" can also access parent class' property. Is there any differences betweet "super" and "this" in this situation?

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;
  }
  talk (sentense) {
    super.mouse(sentense); // This works.
    this.mouse(sentense); // This also works.
  }
}

Answer 1

If you use this, the engine will first try to access the property on the instance itself. If it doesn't exist on the instance, it'll then go to the prototype (Footballer.prototype). If it doesn't exist there, it'll then go to Human.prototype to see if the property exists.

If you use super, it'll immediately go to the parent class, Human.prototype, to see if the property exists, and will go upward from there (rather than go through the instance and child prototype first).

This will be especially important to keep in mind if a method with the same name exists both on the parent and child, which isn't uncommon.

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();