¿Por qué es necesario usar bind en los event listener de los components?

Entiende la razón de usar bind en los event listener de un componente de React

Con poco que hayáis trabajado con React seguro que habréis tenido que recurrir a implementar algún event listener en alguno de vuestros componentes, como por ejemplo, a la hora de gestionar el click sobre un botón:

Un error habitual cuando se trabaja con los event listeners dentro de los componentes es no bindear la función al componente, de modo que cuando el evento se dispara obtenemos el error:

¿A qué se debe esto?

¿Cómo funciona this en Javascript?

En líneas generales, la forma en que la variable this queda enlazada dentro de una función depende de la forma en que dicha función es invocada. De este modo, existe por un lado lo que se conoce como default binding, en el cual this queda enlazado al objeto global donde se está ejecutando Javascript (o undefined en el caso de que estemos en modo estricto) y que es la forma en la que se enlaza thissi ninguna otra regla se cumple:

Por otra parte, también existe el implicit binding, en el cual thisqueda enlazado al objeto que invocó el método:

De este modo, cuando la función foose ejecuta, thisqueda enlazado a la variable object, de modo que lo que obtenemos en la consola es la propiedad namedel objeto.

Sin embargo, esto no significa que thissiempre vaya a apuntar a objdentro de la función foo. En el siguiente ejemplo:

El resultado obtenido es meeeec, es decir, la propiedad namedel objeto global, en vez de la del objeto obj(o undefinedde estar ejecutando Javascript en modo estricto).

Esto también sucede cuando trabajamos con los callback de los event listeners o de cualquier otra función que los implemente. Por ejemplo, cuando usamos la función setTimeout :

Internamente Javascript está haciendo el siguiente paso:

De modo que, al igual que en el ejemplo anterior, cuando se ejecuta la función callback, la función foo ha perdido su contexto y por tanto this queda enlazado al objeto global (o undefined ).

La forma de solucionarlo es recurrir al método bind(explicit hard binding), es decir, forzar a javascript a que la variable this tome como valor el argumento pasado.

En este caso, la variable this sí hace referencia al objeto obj por lo que se obtiene el valor de su propiedad name .

Recapitulando

Volviendo al comienzo del artículo, cuando trabajamos con los componentes de React y event listeners, se produce una situación muy similar a la que hemos comentado en el caso del default binding. Cuando pasamos la referencia de la función encargada de gestionar el evento como un callback:

La función pierde su contexto por lo que al ejecutarse, la variable this ya no hace referencia al objeto de clase que contiene el método sino que adopta el valor undefined .

Un ejemplo simplificado de lo que está sucediendo es el siguiente:

Nota: el body de las clases en Javascript siempre se ejecuta en modo estricto, causa por la cual estamos obteniendo el error y no accediendo al objeto global.

Es por esta razón por la que invocamos el método bind (habitualmente en el constructor de la propia función) cuando queremos evitar este fallo:

¿Quieres recibir más artículos como este?

Suscríbete a nuestra newsletter:

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store