Accès aux variables de membre de classe à l’intérieur d’un gestionnaire d’événements en Javascript

J’ai une petite question concernant le moyen approprié d’accéder aux variables de membre de classe Javascript à partir d’un gestionnaire d’événements que cette classe utilise. Par exemple:

function Map() { this.x = 0; this.y = 0; $("body").mousemove( function(event) { this.x = event.pageX; // Is not able to access Map's member variable "x" this.y = event.pageY; // Is not able to access Map's member variable "y" }); } 

Plutôt que de changer la variable membre de la classe “Map”, le “this.x” dans le gestionnaire d’événements tente d’affecter la variable membre “x” de l’élément qui a déclenché l’événement. Quelle est la manière appropriée d’accéder aux variables membres de la classe “Map” à partir des gestionnaires d’événements?

Toute aide serait grandement appréciée – je me suis gratté la tête à celui-ci.

Cordialement, Charlie

Étant donné que this change dans un contexte d’événement (pointe généralement sur global ), vous devez stocker une référence à vous-même en dehors de l’événement:

 function Map() { this.x = 0; this.y = 0; var _self = this; $("body").mousemove( function(event) { _self.x = event.pageX; // Is now able to access Map's member variable "x" _self.y = event.pageY; // Is now able to access Map's member variable "y" }); } 

La solution que Matt lui a donnée est probablement la voie à suivre.

Je pensais juste que je ferais remarquer que vous pouvez transmettre des données via l’object event comme ceci:

 function Map() { this.x = 0; this.y = 0; // Pass object with data-------------v $("body").bind('mousemove', {ths: this}, function(event) { // access this via event.data event.data.ths.x = event.pageX; event.data.ths.y = event.pageY; }); } 

Ceci est juste pour l’info. Ce n’est vraiment pas une application pratique. La référence de Matt à une variable locale a plus de sens.

Vous pouvez également utiliser JQuery.proxy pour créer une fonction proxy avec son contexte. Vous pouvez ensuite lier le proxy aux événements.

Voici un exemple:

 var init_handler = $.proxy(this.init, this); $('#page_id').bind('pageinit', init_handler);