Events of jQuery Vs. Arrow functions?

Question

When executing the following code:

$("button").on("click", function(){
   console.log("Meu valor é: " + $(this).val());   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button value="1">Clique-me</button>

The value of the button is returned normally. But in:

$("button").on("click", ()=>{
   console.log("Meu valor é " +$(this).val());   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button value="1">Clique-me</button>

Using Arrow Function in event accuses error in jQuery:

Uncaught Typeerror: Cannot read Property 'toLowerCase' of Undefined

You see I’m using the latest version 3.3.1 jQuery.

Would anyone know why the Arrow Function does not work in cases of jQuery events since ES6 is not something so new (also called Ecmascript 2015) released in June 2015 (almost 3 years!)?

Answer 1

To Arrow Function works with jQuery, what doesn’t work is the $(this). This is not implementing by jQuery because is not possible.

Arrow functions don’t have their Own this Binding so it’s technically Impossible to use the this Binding jQuery provides with an Arrow Function.

Free translation:

Arrow functions are not properly linked to this, then it is technically impossible to use the link to this provided by jQuery in a Arrow Function.

This is described in the Ecmascript2015 specification:

An Arrowfunction does not define local bindings for Arguments, super, this, or new target.. Any Ference to Arguments, super, this, or new target. Within an Arrowfunction must resolve to a Binding in a lexically enclosing Environment. Typically this will be the Function Environment of an immediately enclosing Function.

Free translation:

One Arrow Function does not define a local link to Arguments, super, this or new target.. Any reference to Arguments, super, this or new target. in a Arrow Function should be linked to the lexical scope to which it belongs. Typically, the chosen scope will be that of the function immediately above.

To get around the problem, you can take the event source object through the function parameter, so you can access its attributes:

$("button").on("click", event =>{
    console.log("Meu valor é " +event.target.getAttribute('value'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button value="1">Clique-me</button>