Why can't Javascript ES6 call an anonymous sup

Question

This question already has an answer here:

• Accessing a class field on a superclass 1 answer

Please explain the difference between using a parent-child relationship using anonymous functions and using class functions? In case 1 everything works as expected. In case 2, codepen does not return any results.

//CASE 1
class Parent {
  constructor(name) {
    this.name = name;
  }

  exec() {
    console.log('name', this.name);
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }

  exec() {
    super.exec();
    console.log('age', this.age);
  }
}

const c = new Child('ChildName', 31);
c.exec();

//writes Childname + 31 (expected behaviour)

and

//CASE 2
class Parent {
  constructor(name) {
    this.name = name;
  }

  exec = () => {
    console.log('name', this.name);
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }

  exec = () => {
    super.exec();
    console.log('age', this.age);
  }
}

const c = new Child('ChildName', 31);
c.exec();

//writes nothing. Seems to crash.

Answer 1

There is just one instance object, and there can't be two properties with the same name on one object. Your subclass property overrides the property of the superclass.

Additionally you can't access properties via super as super refers to the upper level prototype, and that does not contain any property in your second case (in your first case it contains the method). Therefore, super.exec is undefined, and calling that throws an error.

The prototype chains look as follows:

 // Case 1
                                              - super ------------v
 { name: "ChildName", age: 31 } -> Child { exec() { ... } } -> Parent { exec() { ... } }


 // Case 2
                                  - super² --------------------v                   
 { name: "ChildName", age: 31, exec() { ... } } -> Child {} -> Parent {}

² It might be a bit confusing that super inside of the instance points to Parent, but that's because class fields are evaluated inside of a special initializer function, and that has Child as it's [[HomeObject]], not the instance, and as super refers to the [[HomeObject]]s prototype, it will refer to Parent.