Para comprender mejor cómo funciona, puede cambiar un poco su código:

 class baseClass { bar = 'bar'; constructor() { console.log( `In baseClass constructor this is ${JSON.stringify(this, null, 2)}` ); this.render(); // why does "this" (not this.render()) refer to the created object based on derivedClass? } render() { console.group(); console.log(this); console.log('baseClass rendered'); console.groupEnd(); } } class derivedClass extends baseClass { foo = 'foo'; constructor() { super(); console.log( `In derivedClass constructor this is ${JSON.stringify(this, null, 2)}` ); this.render(); } render() { console.group(); console.log(this); console.log('derivedClass rendered'); console.groupEnd(); } } new derivedClass();

Saldrá:

 In baseClass constructor this is { "bar": "bar" } derivedClass { bar: 'bar' } derivedClass rendered In derivedClass constructor this is { "bar": "bar", "foo": "foo" } derivedClass { bar: 'bar', foo: 'foo' } derivedClass rendered

Entonces la secuencia es la siguiente:

1. derivedClass constructor de la clase derivada se llama cuando hace una new derivedClass();
2. Llama al constructor baseClass
3. Los miembros de datos se rellenan con lo que baseClass "posee"
4. Sin embargo, los métodos son de derivedClass , es por eso que ve "clase derivada representada" cuando se llama a representación desde el constructor de baseClass .
5. Los miembros de datos de derivedClass se agregan
6. derivedClass constructor de la clase derivada llama a render de nuevo.

Es un poco contrario a la intuición, especialmente si vienes de la programación orientada a objetos con C ++, Java, etc. Y creo que esta es la razón por la que algunos intentan evitar las clases y this en JavaScript por completo.