¿Cuál es el orden de ejecución del constructor super() y los métodos de subclase en la programación orientada a objetos en JavaScript?
¿Por qué está indefinido “this” en el método “render()” dentro de la subclase?
¿Por qué “this” dentro del constructor de la clase base se refiere al objeto creado en función a la subclase? Quiero conocer el orden de ejecución aquí.
class baseClass {
constructor() {
this.render(); // ¿por qué "this" (no this.render()) se refiere al objeto creado en función a derivedClass?
}
render() {
console.log("no se ejecutará.");
}
}
class derivedClass extends baseClass {
foo = "foo"
constructor() {
super();
console.log(this);
}
render() {
console.log(this.foo); // ¿por qué "this" está indefinido?
alert("renderizado");
}
}
new derivedClass;
davy.ai
Cuando se crea el objeto
derivedClass
, se llama al constructor de la clase base a través desuper()
. Esto significa que la palabra clavethis
dentro del constructor de la clase base hace referencia al objetoderivedClass
que se está creando, y no al objetobaseClass
en sí.Sin embargo, el método
render()
solo está definido enbaseClass
y no enderivedClass
. Cuando se llama al métodorender()
dentro del constructor de la clase base, la palabra clavethis
sigue haciendo referencia al objetoderivedClass
, pero como el métodorender()
no está definido enderivedClass
, se produce un error ythis
queda indefinido en el métodorender()
dederivedClass
.Para evitar este problema, se recomienda definir también el método
render()
enderivedClass
, de modo que pueda ser llamado desde los objetosbaseClass
yderivedClass
.