Funciones flecha: Qué las diferencia de las funciones comunes

En Javascript las funciones flecha tienen una particularidad importante, que es el tratamiento que se le hace a la variable "this" dentro de la función flecha.

Generalmente "this" en las funciones guarda una referencia del conexto donde se ejecuta la función. Por ejemplo:

Una función definida en el contexto global tiene al objeto window como valor en this.
Una función definida dentro de un objeto, un método, this se refiere al objeto que recibe esa invocación del método
Una función definida como manejador de evento, this tiene asignado el objeto o elemento de la página sobre el que se ha asociado ese manejador de evento.

En el caso particular de las funciones flecha, no se redefine el contexto. Por ello, por poner un ejemplo, si definimos un manejador de eventos con una función flecha, this dentro del manejador no tendrá el valor del objeto sobre el que se define el manejador.

Ejemplo de uso de funciones flecha y la definición del this

Ahora podemos ver una página de ejemplo que podemos ejecutar para comprobar qué contiene this en cada uno de los casos.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejemplo funciones flecha vs funciones normales</title>
</head>
<body>
  <h1>Ejemplo funciones flecha vs funciones normales</h1>
  <script>
    class Foo {
      metodo() {
        console.log('this dentro del método', this);
        setTimeout(function() {
          console.log('this dentro del setTimeout', this);
        })
        document.addEventListener('click', function() {
          console.log('this dentro del manejador', this);
        })
      }
    }
    let foo = new Foo();
    foo.metodo();

    class FooFlecha {
        metodo() {
          console.log('this dentro del método de FooFlecha', this);
          setTimeout(() => {
            console.log('this dentro del setTimeout de FooFlecha', this);
          })
          document.addEventListener('click', () => {
            console.log('this dentro del manejador de FooFlecha', this);
          })
        }
      }
      let fooFlecha = new FooFlecha();
      fooFlecha.metodo();
  </script>

</body>
</html>

En la clase Foo se ha usado this en diversas situaciones. En ellas podemos ver que el contexto y la redefinición. En la clase FooFlecha tenemos el mismo código, pero hemos usado funciones flecha.

Los dos casos particulares donde puedes ver las diferencias es la definición de la función callback en el setTimeout, y de la definición del manejador de eventos. Mira los mensajes de la consola para apreciar las diferencias.

En el setTimeout que tenemos en la clase Foo this vale window
En el setTimeout que tenemos en la clase FooFlecha this vale el mismo objeto que recibe la invocación del método(), ya que el significado de this no se redefine.

Además en el caso del manejador:

En el manejador de evento del objeto document que tenemos definido sobre la clase Foo, el valor de this es el objeto document, ya que el evento se define sobre el document.
En el manejador de evento del objeto documento que tenemos definido en la clase FooFlecha podemos comprobar que this no se redefine y por tanto tiene como valor el mismo objeto que ha recibido el metodo().

Luis

174 5 6 3

Muy Amable, Luis! ha quedado clarísimo.

Funciones flecha: Qué las diferencia de las funciones comunes

Respuestas

Ejemplo de uso de funciones flecha y la definición del this