> Faqs > Utilizar this en constructores de clases con extends en Javascript

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?

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
680 29 46 6
Hola. Pues si. Me ha ayudado mucho. Muchas gracias.