Utilizar this en constructores de clases con extends en Javascript

Hola. Recientemente he estado estudiando JS OOP. Dentro de una clase puedo utilizar this como referencia a la instancia de la clase; pero, si extiendo a otra clase utilizando extends, ya no tengo acceso a this. ¿Por qué pasa esto y como solucionarlo.

Por ejemplo, este código sí que funciona correctamente en Javascript:

class Perro {
    constructor() {
        this.Ladra();
    }
    Ladra() {
        console.log('jau');
    }
}
//Todo OK

Pero este otro código de clase, en el que estamos utilizando extends para heredar de una clase padre, ya no funciona.

class Perro extends Animal{
    constructor() {
        this.Ladra();
    }
    Ladra() {
        console.log('jau');
    }
}
//Da error al acceder a this

¿Por qué ocurre esto?

Editar

Responder la pregunta

Jorge Luis

2 1

Respuestas

La respuesta rápida a tu pregunta:

Si estás sobreescribiendo un constructor en la clase hija (la que hace el extends) y necesitas hacer una mención a this, es necesario llamar antes al constructor de la clase padre mediante una invocación a super().

class Perro extends Animal{
    constructor() {
        super();
        this.Ladra();
    }
    
    //...
}

La llamada a super() se debería realizar antes de cualquier uso del identificador this. Si no lo haces, el error que te aparecerá será bastante descriptivo:

Must call super constructor in derived class before accessing 'this' or returning from derived constructor

Espero que esto te haya ayudado.

Camila

640 27 42 6

Hola. Pues si. Me ha ayudado mucho. Muchas gracias.

Aportar una respuesta