1

Tengo el siguiente sencillísimo código:

$('#filtro-atenciones').on('change', () => {
  console.log("Entra!!");
  console.log(this.value);
  console.log($(this).val());
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
        
<div id="div-filtros" class="form-group">
  <label for="filtro-atenciones">Atenciones:</label>
  <select class="form-control" id="filtro-atenciones">
    <option value="total" selected>Total</option>
    <option value="pendientes">Pendientes</option>
    <option value="curso">En curso</option>
  </select>
</div>

Como verán, el $(this) devuelve undefinied, no se a que se debe. Si alguien pudiera darme una mano estaría más que agradecido.

1 respuesta 1

2

Segun la documentacion sobre el uso de this en las funciones de flechas o arrow function:

Una expresión de función de flecha tiene una sintaxis más corta que una expresión de función y no tiene sus propios argumentos this, arguments, super o new.target. Estas expresiones de función son las más adecuadas para funciones que no son de método, y no pueden usarse como constructores.

Dos factores influyeron en la introducción de las funciones de flecha: funciones más cortas y no vinculante al this.

Lo que en resumen significa que no se hace binding al ámbito de una función cuando se utiliza =>, si quieres acceder al ambito o scope, tendras que utilizar una expresion de funcion estandar:

$('#filtro-atenciones').on('change', () => {
  console.log("No es posible acceder al this en las arrow funcion");
  console.log(this.value);
  console.log($(this).val());
});


$('#filtro-atenciones-2').on('change',function() {
  console.log("Ahora el si puedo acceder al this");
  console.log(this.value);
  console.log($(this).val());
});

        
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<div id="div-filtros" class="form-group">
  <label for="filtro-atenciones">Con funciones de flecha(arrow function):</label>
  <select class="form-control" id="filtro-atenciones">
    <option value="total" selected>Total</option>
    <option value="pendientes">Pendientes</option>
    <option value="curso">En curso</option>
  </select>
</div>


<div id="div-filtros" class="form-group">
  <label for="filtro-atenciones">con function:</label>
  <select class="form-control" id="filtro-atenciones-2">
    <option value="total" selected>Total</option>
    <option value="pendientes">Pendientes</option>
    <option value="curso">En curso</option>
  </select>
</div>

Es bueno notar que aunque forces el contexto a una arrow funcion, esta no la tomara en cuenta:

var contexto = {valor:1};

var arrowFnConContexto = ()=>{ console.log(this.valor);} // imprime undefined, ignora totalmente el contexto
arrowFnConContexto.call(contexto); // asignado contexto

var expresionFn = function(){ console.log(this.valor); } // imprime 1, si toma el contexto
expresionFn.call(contexto);  // asignado contexto

5
  • Increíble! No tenía ni idea de esa limitación de las arrow function! Mil gracias! (En cuanto me deje aceptar la respuesta, lo hago)
    – Genarito
    Commented el 1 feb. 2018 a las 13:29
  • No es una limitación, es una característica. De hecho es una novedad que puede simplificar mucho el código en algunos casos Commented el 1 feb. 2018 a las 14:15
  • No entiendo por qué simplificaría el código? Según tengo entendido si quiero usar Arrow Functions y usar el this tengo que enviar el evento como parametro, y obtener el event.currentTarget(). Todo eso en vez de simplemente llamar a this
    – Genarito
    Commented el 1 feb. 2018 a las 14:23
  • 1
    @Genarito Si hablamos de ese caso pareceria ser mas complejo utilizar =>, pero cuando quieres utilizar javascript orientado a objeto, hacer referencia a this dentro de una clase puede traer mucho dolores de cabeza ya que tienes que tener en cuenta sobre que contexto lo utilizas, como por ejemplo si lo utilizas dentro de un setTimeout().
    – Einer
    Commented el 1 feb. 2018 a las 14:43
  • Claro, en eso tenés razón, siempre te lleva a usar el famoso let self = this antes de entrar en funciones ajenas a la clase
    – Genarito
    Commented el 1 feb. 2018 a las 14:50

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.