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)