L'utilisation des fonctions fléchées ES6 avec la thisliaison lexicale est excellente.

Cependant, j'ai rencontré un problème il y a un instant en l'utilisant avec une liaison de clic jQuery typique:

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

En utilisant une fonction de flèche à la place:

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

Et puis $(this)est converti en fermeture de type ES5 (self = this).

Est-il possible que Traceur ignore "$ (this)" pour la liaison lexicale?

Cela n'a rien à voir avec Traceur et la désactivation de quelque chose, c'est simplement ainsi que fonctionne l'ES6. C'est la fonctionnalité spécifique que vous demandez en utilisant à la =>place de function () { }.

Si vous voulez écrire ES6, vous devez écrire ES6 tout le temps, vous ne pouvez pas y basculer et en sortir sur certaines lignes de code, et vous ne pouvez certainement pas supprimer ou modifier le =>fonctionnement. Même si vous le pouviez, vous vous retrouveriez avec une version bizarre de JavaScript que vous seul comprenez et qui ne fonctionnerait jamais correctement en dehors de votre Traceur personnalisé, ce qui n'est certainement pas le but de Traceur.

La façon de résoudre ce problème particulier n'est pas d'utiliser thispour accéder à l'élément cliqué, mais d'utiliser à la place event.currentTarget:

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

jQuery fournit event.currentTargetspécifiquement parce que, même avant ES6, il n'est pas toujours possible pour jQuery d'imposer un thisà la fonction de rappel (c'est-à-dire s'il était lié à un autre contexte via bind.

Liaison d'événement

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

Boucle

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

Un autre cas

La première réponse est correcte et je l'ai votée à la hausse.

Cependant, il y a un autre cas:

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

Peut être corrigé comme:

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

Il s'agit d'une erreur historique dans jQuery qui met l' index , au lieu de l' élément comme premier argument:

.each (fonction)

Type de fonction : Function( Integer index, Element element )
une fonction à exécuter pour chaque élément correspondant.

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

(C'est une réponse que j'ai écrite pour une autre version de cette question, avant d'apprendre que c'était un double de cette question. Je pense que la réponse rassemble les informations assez clairement, alors j'ai décidé de l'ajouter en tant que wiki de la communauté, bien que ce soit en grande partie juste différent formulation des autres réponses.)

Vous ne pouvez pas. C'est la moitié du point des fonctions fléchées, elles se ferment au thislieu d'avoir leurs propres fonctions définies par la façon dont elles sont appelées. Pour le cas d'utilisation de la question, si vous souhaitez thisdéfinir par jQuery lors de l'appel du gestionnaire, le gestionnaire doit être une functionfonction.

Mais si vous avez une raison d'utiliser une flèche (peut-être voulez-vous utiliser thispour ce que cela signifie en dehors de la flèche), vous pouvez utiliser à la e.currentTargetplace de thissi vous le souhaitez:

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

L'objet currentTargeton the event est le même que celui défini par jQuery thislors de l'appel de votre gestionnaire.

Comme l'a dit Meager dans sa réponse à cette même question Si vous voulez écrire ES6, vous devez écrire ES6 tout le temps ,

donc si vous utilisez la fonction fléchée de ES6:, (event)=>{}vous devez utiliser à la $(event.currentTarget)place de $(this).

vous pouvez également utiliser une manière plus agréable et plus propre d'utiliser currentTarget comme ({currentTarget})=>{},

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

à l'origine, cette idée a été commentée par rizzi frank dans la réponse de @ Meager, et je l'ai jugée utile et je pense que tout le monde ne lira pas ce commentaire, alors je l'ai écrit comme une autre réponse.