erknrio
4/25/2017 - 4:08 PM

Javascript: llamar a un método de una clase dentro de otro al disparar un evento.

Javascript: llamar a un método de una clase dentro de otro al disparar un evento.

Problema

Cuando intentamos ejecutar métodos de una clase dentro de otra en JavaScript usamos this, el problema es que this depende del entorno (scope) donde se haya ejecutado dicho método. Si hacemos esto:

class Saluda {
  constructor() {
    this.hola = "Hola Mundo!";
  }
  
  get hello() {
    return this.hola;
  }
  
  saluda() {
    console.log("Me gusta saludar con un: " + this.hello);
  }
}

Esparamos poder hacer lo siguiente:

var saludo = new Saluda();

console.log(saludo.hello());

Pero si llamamo a hola dentro de otro método debería funcionar:

var saludo = new Saluda();

console.log(saludo.saludar());

¿Pero que pasa si queremos llamar a saluda después de, por ejemplo, hacer submit de un formulario? Vamos a verlo:

https://jsfiddle.net/erknrio/zr6zc6hs/1/

Solución

Si miraste el ejemplo de jsfiddle tendrás comentado cada paso y explicado pero te haré un resumen.

Al usar bind podemos mandar el valor que queremos que tenga this dentro del método que vamos a usar para manejar el evento submit disparado.

Le pasamos el propio objeto Saluda de tal manera que this haga referencia el y no al formulario que disparó el evento.

¿Más claro ahora? :-).