Entradas con la etiqueta ‘ambito’

Bind en las clases de ES6 de JavaScript

Publicado por Iván Gajate el 21 de septiembre de 2019 en Desarrollo Web, Eventos, JavaScript | No hay comentarios »

Respuesta corta:

// Utilizo bind para vincular la función con el scope this
this.onClick = this.onClick.bind(this);

Respuesta larga:

Al pasar el manejador del evento como un callback, se pierde el ámbito, de tal manera que la función se ejecuta correctamente, pero dentro de ella se cree que this es el propio botón (la etiqueta html <button>). Cuando realmente nosotros esperamos que this sea la propia clase.

Para solucionarlo basta con reasignar en el propio constructor el scope que debe tener esa función.

this.onClick = this.onClick.bind(this);

y nuestra clase funcionará como esperamos:

class Foo{
 
  constructor(){
    this.onClick = this.onClick.bind(this);
    // Listener del boton
    document.getElementById('button').addEventListener('click', this.onClick);
  }
 
  onClick(){
    console.log(this); // Foo {...}
    // Ahora puedo remover el listener sin problema
    document.getElementById('button').removeEventListener('click', this.onClick);
  }
 
}
 
var foo = new Foo();

Una muy buena referencia y explicado con más detalle: https://www.freecodecamp.org/news/this-is-why-we-need-to-bind-event-handlers-in-class-components-in-react-f7ea1a6f93eb/

Hoisting o Elevación de las variables en JavaScript

Publicado por Iván Gajate el 2 de julio de 2013 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

Interesantísima explicación sobre el comportamiento «peculiar» de JavaScript a la hora de definir las variables dentro de una función. Es lo que se llama «hoisting» o elevación de las variables.

http://www.etnassoft.com/2010/12/26/hoisting-en-javascript/

Básicamente se pueden evitar estos problemas declarando todas las variables al principio de cada función y tratando de no jugar a pisar variables con el mismo nombre y «chapus» así.