2

Tengo una clase "Hijo" que lo que hace simplemente es crear un botón como propiedad global, nada más instanciarse.
Como parámetro, en su constructor recibirá una función que estará dentro de otra clase llamada "Padre". Esta función se la pasaremos a un método de "Hijo" que también ejecutamos en su constructor. Lo que hace este método es añadirle al botón que ha creado un eventListener de tipo "click" que ejecutará esta función recibida del "Padre" pasándole como parámetro el id que tiene "Hijo".

Os paso el código de "Hijo".

export default class Hijo {
  constructor(fn) {
    this.id = 1;
    this.btn = document.createElement('button');
    this.createBtn(fn);
  }
  createBtn(fn) {
    this.btn.innerHTML = 'Clic';
    this.btn.onclick = () => fn(this.id);
    document.body.append(this.btn);
  }
}

En "Padre" Tenemos un método llamado borrar(id) que recibirá un id. (El de "Hijo").
En el constructor() lo que hacemos es crear una instancia nueva de Hijo pasándole el método borrar() que se activará cuando hagamos click al botón que ha creado la instancia.

Paso el código de "Padre"

import Hijo from './Hijo';

export default class Padre {
  constructor() {
    this.mensaje = 'hola!';
    const hijo = new Hijo(this.borrar);
  }

  // Este método se ejecuta desde Hijo al hacer clic al botón, el id se imprime bien, pero luego hemos perdido la referencia a Padre y this es undefined
  borrar(id) {
    alert(id);
    alert(this);
    alert(this.mensaje);
  }
}

Cuando hago click al botón se muestra el id del botón al que he clicado, eso funciona. Pero luego ya no sigo teniendo la referencia this del "Padre".

¿Cómo hago para seguir guardando la referencia a la clase "Padre"?

Todo esto es un ejemplo muy sencillo de la situación real que necesito. Al final simplemente es la típica App de Tareas en la que cada tarea es una instancia de una clase "ToDo" y que ella misma se encarga de crear el markup de cada tarea, incluidos los botones de borrar, editar, etc. Al hacer click al botón de borrar, debería pasarle al padre la referencia del id de la tarea a borrar y luego el método borrarTarea() que está en el "Padre" se encargará de borrar esa tarea en concreto. Como veis, recibo bien el id del padre pero luego no puedo llamar a ninguna otra propiedad ni método de la clase "Padre" porque ya no tengo el contexto correcto.

Dejo un link a stackblitz para el que lo quiera probar.

1 respuesta 1

1

Agrega this.borrar = this.borrar.bind(this); en el padre antes de crear el hijo. Esto hará que borrar conserve la referencia al objeto Padre. El callback actualmente se está llamando en el contexto global, y si no está bindiado (atado) a su objeto, perderá la referencia.

Esto era una práctica muy común en react cuando se trabajaba con clases. Te dejo un enlace en el que explican más detalles sobre ello. A pesar de que el post está enfocado en react, esto es en realidad un problema de javascript.

class Padre {
  constructor() {
    this.mensaje = 'hola!';
    this.borrar = this.borrar.bind(this);
    const hijo = new Hijo(this.borrar);
  }

  // Este método se ejecuta desde Hijo al hacer clic al botón, el id se imprime bien, pero luego hemos perdido la referencia a Padre y this es undefined
  borrar(id) {
    alert(id);
    alert(this);
    alert(this.mensaje);
  }
}

class Hijo {
  constructor(fn) {
    this.id = 1;
    this.btn = document.createElement('button');
    this.createBtn(fn);
  }
  createBtn(fn) {
    this.btn.innerHTML = 'Clic';
    this.btn.onclick = () => fn(this.id);
    document.body.append(this.btn);
  }
}

const padre = new Padre();

1
  • ¡Tremendo, Jaime! Lo había probado porque me ocurría cuando empecé a hacer React con classes hace tiempo. Pero no funcionaba. Y era porque había escrito esa línea debajo de la instancia como un verdadero novato. ¡Muchas gracias! Commented el 30 mar. 2022 a las 9:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.