$ (this) returns undefinied in select event change

Question

$ (this) returns undefinied in select event change

Navigation

#1 by (2 votes)

1

I have the following simple code:

$('#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>

As you will see, the $(this) returns undefinied, I do not know what is due. If someone could give me a hand I would be more than grateful.

javascript jquery

asked by Genarito 01.02.2018 в 14:18

source

1 answer

bootstrap-select returns the stuck text of what is selected PHP How to get the name of a variable file?

score 2 · Accepted Answer

According to the documentation on the use of this in functions of arrows or arrow function:

An arrow function expression has a shorter syntax than   a function expression and does not have its own arguments this ,   arguments, super or new.target. These function expressions are the   more suitable for non-method functions, and can not be used   as builders.

Two factors influenced the introduction of the arrow functions:   shorter functions and not binding to this .

What in summary means that there is no binding to the scope of a function when => is used, if you want to access the scope or scope, you will have to use a standard function expression:

$('#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>

It is good to note that although forces the context to an arrow function, it will not take it into account:

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