2

He visto que, aparte de la simpleza sintáctica, la sintaxis de funciones flecha permite conservar el contexto del this que está llamando a la función sin generar un nuevo contexto dentro de ella.

Pero ¿Qué pasa cuando sí necesito el contexto dentro de la función que estoy llamando? ¿Significa que el uso de las funciones flecha debe evaluarse caso a caso para ver si no se romperá nada?

Por ejemplo, en este caso, el click en un elemento #clickme2 no funcionaría:

jQuery('#clickme1').on('click',function() {
    console.log('Se ha pinchado: ',jQuery(this).attr('id'));
});

jQuery('#clickme2').on('click',() => {
    console.log('Se ha pinchado: ',jQuery(this).attr('id'));
});
.misdivs {
padding:5px;
margin:5px;
border:1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="misdivs" id="clickme1">Soy el div clickme</div>

<div class="misdivs" id="clickme2">Soy el div clickme2</div>

2 respuestas 2

2

Buena pregunta, servirá para aclarar algo que todavía no es entendido en el mundo JavaScript por devs que toman contacto con el lenguaje.

Las funciones flecha nacieron por el problema eterno de dentro de callbacks no se sobreescriba el contexto sin necesidad de usar .bind o el horroroso var that = this, ya que una función de flecha no están vinculadas a métodos y por ende, no pueden ser usadas como funciones constructoras; es decir, para crear instancias. Este tipo de funciones fue inspirado en lenguajes funcionales.

No tienes que usar funciones flecha para todo si no necesitas el comportamiento que te ofrece. En el caso que has expuesto, no tiene sentido usar una función flecha si se quiere tener acceso a this simplemente porque no lo tendrá. En este contexto entendemos que las funciones flecha no son un reemplazo a las funciones estándar ni mucho menos; solo han venido como un enfoque diferente ya que no comparten las mismas características. Ambas pueden convivir en armonía.

2
  • podrias dar un ejemplo para que no se sobreescriba el contexto sin necesidad de usar .bind el 14 mar. 2017 a las 14:42
  • @x-rw Ya amenadiel ha puesto el ejemplo usando la función de flecha: jQuery('#clickme2').on('click',() => { En ese escenario, si haces uso de this ya no representa a #clickme2 si no al contexto en donde éste se ejecuta (si no hay nada fuera, sería window).
    – gugadev
    el 14 mar. 2017 a las 14:56
0

Muchas gracias, Gustavo, por la respuesta. Me queda claro que las funciones flecha no están destinadas a reemplazar a cualquier closure, sobretodo si dentro de éstos el cambio de contexto es relevante.

Peeero espefícicamente para jQuery, pude usar funciones flecha usando el parámetro de ésta para obtener el event.currentTarget.

Esto es nada más que una prueba de concepto, parece mucho trabajo extra simplemente para usar funciones flecha:

jQuery('#clickme1').on('click',function() {
    console.log('Se ha pinchado: ',jQuery(this).attr('id'));
});

jQuery('#clickme2').on('click',(e) => {
    console.log('Se ha pinchado: ',jQuery(e.currentTarget).attr('id'));
});
.misdivs {
padding:5px;
margin:5px;
border:1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="misdivs" id="clickme1">Soy el div clickme</div>

<div class="misdivs" id="clickme2">Soy el div clickme2</div>

1
  • Está claro que siempre podrás, ya que e siempre hace referencia al evento. Pero sinceramente, es un desgaste de dedos cuando puedes tener disponible this como referencia al origen del evento. Otra cosa muy distinta es que necesites el evento para algo, en ese caso, una función flecha te va bien.
    – gugadev
    el 14 mar. 2017 a las 13:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.