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

by

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 (ie, if it was bound to another context via bind.

More Related Contents:

  1. Are ‘Arrow Functions’ and ‘Functions’ equivalent / interchangeable?
  2. What’s the meaning of “=>” (an arrow formed from equals & greater than) in JavaScript?
  3. When should I use a return statement in ES6 arrow functions
  4. ECMAScript 6 arrow function that returns an object
  5. What does “this” refer to in arrow functions in ES6?
  6. When should I use arrow functions in ECMAScript 6?
  7. What do multiple arrow functions mean in JavaScript?
  8. Why doesn’t my arrow function return a value?
  9. Arrow function without curly braces
  10. Curly Brackets in Arrow Functions
  11. Why shouldn’t JSX props use arrow functions or bind?
  12. How do I write a named arrow function in ES2015?
  13. How to import jquery using ES6 syntax?
  14. What are the differences (if any) between ES6 arrow functions and functions bound with Function.prototype.bind?
  15. Official information on `arguments` in ES6 Arrow functions?
  16. Arrow Functions and This [duplicate]
  17. Using _ (underscore) variable with arrow functions in ES6/Typescript
  18. ES6 arrow functions not working on the prototype?
  19. Arrow Function in Object Literal [duplicate]
  20. What does arrow function ‘() => {}’ mean in Javascript? [duplicate]
  21. JavaScript ES6: Test for arrow function, built-in function, regular function?
  22. Can I use arrow function in constructor of a react component?
  23. Can I use ES6’s arrow function syntax with generators? (arrow notation)
  24. Immediate function using JavaScript ES6 arrow functions
  25. ESCMAScript 6 arrow functions – parentheses around parameter
  26. ES6 functions, arrow functions and ‘this’ in an ES6 class [duplicate]
  27. Why can I not use `new` with an arrow function in JavaScript/ES6?
  28. Why is `throw` invalid in an ES6 arrow function?
  29. Is it possible to export Arrow functions in ES6/7?
  30. $(‘elems’).each() with fat arrow

Leave a Comment