¿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 clavethisdentro del constructor de la clase base hace referencia al objetoderivedClassque se está creando, y no al objetobaseClassen sí.Sin embargo, el método
render()solo está definido enbaseClassy no enderivedClass. Cuando se llama al métodorender()dentro del constructor de la clase base, la palabra clavethissigue haciendo referencia al objetoderivedClass, pero como el métodorender()no está definido enderivedClass, se produce un error ythisqueda 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 objetosbaseClassyderivedClass.