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