Using jQuery $(this) with ES6 Arrow Functions (lexical this binding)

Question

Using ES6 arrow functions with lexical this binding is great.

However, I ran into an issue a moment ago using it with a typical jQuery click binding:

class Game {
  foo() {
    self = this;
    this._pads.on('click', function() {
      if (self.go) { $(this).addClass('active'); }
    });
  }
}

Using an arrow function instead:

class Game {
  foo() {
    this._pads.on('click', () => {
      if (this.go) { $(this).addClass('active'); }
    });
  }
}

And then $(this) gets converted to ES5 (self = this) type closure.

Is a way to have Traceur ignore "$(this)" for lexical binding?

Answer 1

This has nothing to do with Traceur and turning something off; this is simply how ES6 works. It's the specific functionality you're asking for by using => instead of function () { }.

If you want to write ES6, you need to write ES6 all the time. You can't switch in and out of it on certain lines of code, and you definitely cannot suppress or alter the way => works. Even if you could, you would just wind up with some bizarre version of JavaScript that only you understand and which would never work correctly outside of your customized Traceur, which definitely isn't the point of Traceur.

The way to solve this particular problem is not to use this to gain access to the clicked element, but instead use event.currentTarget:

Class Game {
  foo(){
    this._pads.on('click', (event) => {
      if(this.go) {
        $(event.currentTarget).addClass('active');
      }
    });
  }
}

jQuery provides event.currentTarget specifically because, even before ES6, it is not always possible for jQuery to impose a this on the callback function (i.e. if it was bound to another context via bind.

Answer 2

Event binding

$button.on('click', (e) => {
    var $this = $(e.currentTarget);
    // ... deal with $this
});

Loop

Array.prototype.forEach.call($items, (el, index, obj) => {
    var $this = $(el);
    // ... deal with $this
});

Answer 3

Another case

The answer by meagar is correct and I've up-voted it.

However, there is another case:

$('jquery-selector').each(() => {
    $(this).click();
})

Could be fixed as:

$('jquery-selector').each((index, element) => {
    $(element).click();
})

This is a historical mistake in jQuery which puts the index, instead of the element as the first argument:

.each( function )

function
Type: Function( Integer index, Element element )
A function to execute for each matched element.

See: https://api.jquery.com/each/#each-function

Also applies to .map( function ) and .filter( function ).

Answer 4

As Meager said in his answer on this same question If you want to write ES6, you need to write ES6 all the time,

so if you are using arrow function of ES6: (event)=>{}, then you have to use $(event.currentTarget) instead of $(this).

you can also use more nicer and cleaner way of using currentTarget as ({currentTarget})=>{},

Class Game {
  foo(){
    this._pads.on('click', ({currentTarget}) => {
      if(this.go) {
        $(currentTarget).addClass('active');
      }
    });
  }
}

originally this idea was commented by rizzi frank in meagar's answer, and i felt it useful and i think that not all people will read that comment so i have written it as this another answer.

Answer 5

(This is an answer I wrote for another version of this question, before learning it was a duplicate of this question. I think the answer pulls together the information fairly clearly so I decided to add it as a community wiki, although it's largely just different phrasing of the other answers.)

You can't. That's half the point of arrow functions, they close over this instead of having their own that's set by how they're called. For the use case in the question, if you want this set by jQuery when calling the handler, the handler would need to be a function function.

But if you have a reason for using an arrow (perhaps you want to use this for what it means outside the arrow), you can use e.currentTarget instead of this if you like:

class Game {
  foo(){
    this._pads.on('click', e => {                   // Note the `e` argument
      if(this.go) {
        $(e.currentTarget).addClass('active');      // Using it
      }
    });
  }
}

The currentTarget on the event object is the same as what jQuery sets this to when calling your handler.