Accéder aux variables membres de la classe à l'intérieur d'un gestionnaire d'événements en Javascript

Question

J'ai une question rapide concernant la manière correcte d'accéder aux variables membres de la classe Javascript depuis l'intérieur d'un gestionnaire d'événements utilisé par cette classe. 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 « carte », 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 bonne façon d'accéder aux variables membres de la classe "Map" à partir des gestionnaires d'événements?

Toute aide serait grandement appréciée - J'ai été en quelque sorte me gratter la tête à celui-ci.

Cheers, Charlie

Answer 1

Depuis this changements dans un contexte d'événements (les points à global habituellement), 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" 
    }); 
} 

Answer 2

La solution Matt lui a donné probablement le chemin à parcourir.

Je pensais juste que je signale que vous pouvez transmettre des données via l'objet d'événement comme celui-ci:

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.

Answer 3

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

est un exemple:

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