tipos - javascript orientado a objetos pdf

Acceder a las variables de los miembros de la clase dentro de un controlador de eventos en Javascript

Question

Tengo una pregunta rápida sobre la forma correcta de acceder a las variables miembro de la clase Javascript desde el interior de un controlador de eventos que usa la clase. Por ejemplo:

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"
    });
}

En lugar de cambiar la variable miembro de la clase "Mapa", el "this.x" en el controlador de eventos intenta afectar la variable de miembro "x" del elemento que desencadenó el evento. ¿Cuál es la forma correcta de acceder a las variables miembro de la clase "Mapa" desde los controladores de eventos?

Cualquier ayuda sería muy apreciada; me he estado rascando la cabeza en este caso.

Saludos, Charlie

Answer 1

Dado que this cambia en un contexto de evento (puntos generalmente global ), necesita almacenar una referencia a usted mismo fuera del evento:

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 solución que Matt le dio probablemente sea el camino a seguir.

Solo pensé en señalar que puede pasar datos a través del objeto de evento de esta manera:

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;     
    });
}

Esto es solo por la información. Realmente no es una aplicación práctica. La referencia de Matt a una variable local tiene más sentido.

Answer 3

También puede usar JQuery.proxy para crear una función proxy con su contexto. Puede atar el proxy a eventos.

Aquí hay un ejemplo:

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