Comprender las flechas gruesas (=) en CoffeeScript

Las flechas gordas (=> ) son expresiones de funciones especiales que confunden incluso a los desarrolladores más inteligentes. La mayoría de los profesionales de JavaScript saben que el cierre cambia el significado de this (@ en CoffeeScript).

Flechas gruesas con cierres en CoffeeScript

Por ejemplo, tenemos una clase dentro de la cual @ se resuelve a sí mismo, pero en un cierre anidado (también conocido como definición de función anónima) el @ es window :

Flechas gruesas con cierre en CoffeeScript

El código CoffeeScript:

class A 
  a: ()->
    console.log(@)
    b=()-> console.log(@)
    b()

a = new A
a.a()

El código JavaScript:

var A, a;

A = (function() {
  function A() {}

  A.prototype.a = function() {
    var b;
    console.log(this);
    b = function() {
      return console.log(this);
    };
    return b();
  };

  return A;

})();

a = new A;

a.a();

Pruébelo usted mismo en el sitio web de CoffeeScript.

Este es el uso más común de flechas gruesas en CoffeeScript. Este caso también incluye controladores de eventos jQuery omnipresentes, clics, mousedowns, mouseups, etc.

Flechas gruesas con clases en CoffeeScript

Las cosas se complican un poco en el código JavaScript compilado cuando intentamos aplicar => en los objetos/clases. Sin embargo, los resultados son los mismos en la consola con ambos registros generando el mismo objeto para this :

Flechas gruesas con clases en CoffeeScript

El código CoffeeScript:

class A 
  a: ()->
    console.log(@)
    b=()-> console.log(@)
    b()
  c: ()=>
    console.log(@)

a = new A
a.a()
a.c()

El código JavaScript:

var A, a,
  __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

A = (function() {
  function A() {
    this.c = __bind(this.c, this);
  }

  A.prototype.a = function() {
    var b;
    console.log(this);
    b = function() {
      return console.log(this);
    };
    return b();
  };

  A.prototype.c = function() {
    return console.log(this);
  };

  return A;

})();

a = new A;

a.a();

a.c();

Pruébelo usted mismo en el sitio web de CoffeeScript.

¿Cuál es la diferencia entonces? ¿Deberíamos usar flechas gruesas en métodos de objetos en lugar de delgadas? El asunto queda más claro si expandimos el objeto en la consola y observamos que tiene dos método c() ! Uno en su prototipo y otro en la instancia:

Métodos de protección Fat Arrows

La diferencia es sutil cuando invocamos los métodos, pero recuerda que JavaScript es un lenguaje prototipo. Si puede aumentar la clase principal y todas las instancias que se extendieron de esa clase siguen el cambio de prototipo. Entonces, si aumentamos A.a() y A.c() métodos después creamos el a objeto, el a.a() se actualizará mientras a.c() permanecerá igual (console.log(@) ):

El método Fat Arrows no ha cambiado

Flechas gruesas con funciones en CoffeeScript

Otro uso de las flechas gruesas consiste en pasar funciones a otros objetos. En este caso el -> pierde la referencia a la clase/objeto en el que se escribió originalmente mientras que el => El método realiza un seguimiento incluso en un contexto extranjero:

Flechas gruesas con funciones en CoffeeScript

El código CoffeeScript:

[Nota al margen]

Leer publicaciones de blog es bueno, pero ver cursos en video es aún mejor porque son más atractivos.

Muchos desarrolladores se quejaron de la falta de material de video de calidad asequible en Node. Es una distracción ver videos de YouTube y una locura pagar $ 500 por un curso de video de Node.

Visite Node University, que tiene cursos de video GRATUITOS en Node:node.university.

[Fin de la nota al margen]

class A 
  x: ()->
    console.log(@)
  y: ()=>
    console.log(@)

f = (callback)->  
  callback()

a = new A
a.x()
a.y()
f(a.x)
f(a.y)

El código JavaScript:

var A, a, f,
  __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

A = (function() {
  function A() {
    this.y = __bind(this.y, this);
  }

  A.prototype.x = function() {
    return console.log(this);
  };

  A.prototype.y = function() {
    return console.log(this);
  };

  return A;

})();

f = function(callback) {
  return callback();
};

a = new A;

a.x();

a.y();

f(a.x);

f(a.y);

Pruébelo usted mismo en el sitio web de CoffeeScript.

Conclusión sobre Fat Arrows en CoffeeScript

No hay razón para tener miedo de las flechas gruesas en CoffeeScript. Son ahorradores de tiempo (y logradores de claridad) cuando se trata de funciones anidadas y controladores de eventos jQuery. Cuando se aplican a métodos de clase, la buena regla general es:use => cuando necesitamos @ ser el objeto en el que se escribe el método; usa -> cuando necesitamos @ ser el objeto en el que se ejecuta el método.