Javascript: problème avec "this" -mot clé avec les écouteurs d'événement

Question

J'ai un problème avec eventlisteners en javascript qui est probablement dû à mon contrôle incomplet de la langue.

Je souhaite enregistrer les écouteurs d'événement en utilisant addEventListener()/attachEvent(); Je veux également pouvoir retirer les écouteurs plus tard, donc je ne peux pas enregistrer de fonctions anonymes. Dites maintenant que je veux enregistrer une méthode d'un objet en tant qu'écouteur d'événements. D'abord, je m'attendais à addEventListener(event, node, object.method) de travailler. Cependant, après avoir lu sur les événements, je comprends maintenant que le mot-clé this fera référence à la cible de l'événement lorsque l'écouteur d'événement est appelé, pas mon objet.

Pour contourner ce problème, je l'ai créé une nouvelle méthode, methodCallback de l'objet, comme suit:

object.methodCallback = function() { 
    self.method(); 
} 

la variable self est définie pour copier this dans le constructeur de l'objet. J'enregistre ensuite object.methodCallback comme un eventlistener.

Je pense que ce doit être la mauvaise façon de le faire. Mais quelle est la bonne façon?

Excusez-moi si cette question est commune, mais je n'ai pas été en mesure de trouver une réponse sur le SO jusqu'à présent

Answer 1

Il est fréquent que les gens utilisent l'auto de telle manière. Je dirais utiliser 'self' si vous êtes dans un class et 'that' sinon.

Vous devez définir l'auto/que d'un niveau dans la chaîne de portée.

var self = this; 
object.methodCallback = function() { 
    self.method(); 
} 

Et oui, c'est comme ça que ça roule. Malheureusement.

Answer 2

La réaffectation de "cette portée" afin que vous puissiez y faire référence plus tard est un comportement acceptable en Javascript car vous en auriez probablement besoin plus tard. La bibliothèque Javascript telle que jQuery et YUI vous fournit une fonction facile à utiliser (comme $.proxy() dans jQuery ou YUI.bind()) pour ce faire. Étant donné qu'ils vous fournissent une telle fonction, je suppose que c'est une méthode courante dans JS