Resumen del This

En Adalab, nuestro profesor Álex Guerrero, nos hizo este resumen con los usos del This. El objetivo es utilizarlo de guía a la hora de aplicarlo o afrontar ejercicios en los que aparezca. También he añadido el caso de Call y Apply.

1. ¿La función se ejecuta como un método? (ej. obj.metodo())

This será igual al objeto (obj)

2. ¿La función donde usamos el this utiliza un .bind()?

This será igual al objeto que se pasa como argumento del .bind()

3. ¿La función donde usamos el this se ejecuta con un new delante?

This será igual al objeto nuevo que se crea

Con las clases de ES6 (sería el mismo caso que el de arriba)

4. ¿La función se ejecuta con un call o un apply?

This apunta al objeto que recibe como primer argumento

5. ¿No es ninguno de los casos anteriores?

• El valor de this será undefined si ponemos ‘use strict’ en nuestro archivo o es un módulo de ES6 (tiene imports y exports)
• Si no ponemos ‘use strict’, el valor del this será el objeto global (en el caso del navegador, es Window)

6. ¿Es una función flecha?

El valor de this es igual que el de el contexto en el que se ha creado la función.Para hacer un símil, una función flecha es como si definiésemos una función y luego hiciesemos un bind automáticamente a this.

Uso del THIS en un caso de evento

Creamos un botón con un id y lo añadimos a la página.

Al pulsar el botón se ejecuta showId pero como lo ejecutamos dentro del método addEventListener del button, this hace referencia al button en vez de purchase. El resultado es que aparecerá en la pantalla ‘soy-un-boton’ en vez de ‘b51dbe23’.

Esto causa muchos errores en los addEventListener. Dado que lo que hacemos es “elemento.addEventListener(función)”. Si tenemos un this dentro de la función, ese this hace referencia al elemento(no al objeto) y será el elemento HTML (un botón, un input,…) y no funcionará como esperamos.

Lo mismo pasa en React, queremos que el this haga referencia al componente por eso usamos el bind para especificar que queremos que el this sea igual alcomponente de React en sí (App, Clock o el que sea).