syntax - tutorial - coffeescript vs javascript

¿Cómo me refiero a ''esto'' real dentro de la devolución de llamada de fat-arrow de CoffeeScript?

Question

El título lo dice todo. Cuando uso la flecha de grasa en CoffeeScript, la almacena primero antes de llamar a la función. Por ejemplo:

class myClass
    constructor: ->
        element = $ "#id"
        element.click ->
            @myMethod(@value)
            return
        return

    myMethod: (c)->
        window.console.log(c)
        return

rendiría

var myClass;

myClass = (function() {
  function myClass() {
    var element;
    element = $("#id");
    element.click(function() {
      this.myMethod(this.value);
    });
    return;
  }

  myClass.prototype.myMethod = function(c) {
    window.console.log(c);
  };

  return myClass;

})();

Ahora en la línea # 8 de JavaScript, this.myMethod está mal. En este ámbito, this refiere al element lugar de a la clase MyClass .

Sin embargo, si en la línea 4 de CoffeeScript, reemplazo element.click -> por element.click => la línea # 8 en JavaScript se convertirá en _this.myMethod(_this.val) donde this referencia a myClass se almacena en _this antes de llamar la función. Pero _this.value no está definido e, incluso si estuviera definido, el objeto al que intento acceder aquí es un element (que se refiere a this palabra clave en el alcance de esta función).

¿Cómo accedería al real this ahora?

Answer 1

Puedes alcanzar tu objetivo al menos de tres maneras. El primero sería:

class myClass
    constructor: ->
        element = $ "#id"
        element.click =>
            @myMethod(element.value)
            return
        return

    myMethod: (c) ->
        window.console.log(c)
        return

Y el 2do:

class myClass
    constructor: ->
        element = $ "#id"
        myMethodCallback = (c) => @myMethod(c)
        element.click ->
            myMethodCallback(@value)
            return
        return

    myMethod: (c) ->
        window.console.log(c)
        return

El tercero es como se muestra a continuación. Sin embargo, no estoy seguro del uso de la API de jQuery, así que mejor verifique en la página de documentos apropiada .

class myClass
    constructor: ->
        element = $ "#id"
        element.click (event) =>
            @myMethod(event.target.value)
            return
        return

    myMethod: (c) ->
        window.console.log(c)
        return

Preferiría la primera manera, ya que parece ser más sencillo. Esto o lo otro, pero debe decidir "qué esto" le gustaría tener en el alcance del elemento. Haga clic en Volver a llamar. No es posible acceder a dos ''thises'' al mismo tiempo.

Por cierto. Todas esas declaraciones de devolución parecen innecesarias. La solución de trabajo más corta se vería así:

class myClass
    constructor: ->
        element = $ "#id"
        element.click => @myMethod(element.value)

    myMethod: (c) -> window.console.log(c)