Доступ к переменным-членам класса внутри обработчика события в Javascript

У меня есть быстрый вопрос относительно правильного доступа к переменным-членам класса Javascript изнутри обработчика событий, который использует этот класс. Например:

function Map() {
    this.x = 0;
    this.y = 0;

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

Вместо изменения переменной-члена класса "Карта" "this.x" в обработчике событий пытается повлиять на переменную-член "x" элемента, вызвавшего событие. Каков правильный способ доступа к переменным-членам класса "Карта" из обработчиков событий?

Любая помощь будет принята с благодарностью - я как бы почесал голову на этом.

Cheers, Charlie

Ответы

Ответ 1

Так как this изменяет контекст события (обычно указывает на global), вам нужно сохранить ссылку на себя вне события:

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 member variable "x"
        _self.y = event.pageY;     // Is now able to access Map member variable "y"
    });
}

Ответ 2

Решение, которое Мэтт дало ему, вероятно, способ пойти.

Просто подумал, что я хотел бы указать, что вы можете передавать данные через объект события следующим образом:

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

Это только для информации. Это действительно не практическое применение. Мэтт ссылки на локальную переменную имеет больше смысла.

Ответ 3

Вы также можете использовать JQuery.proxy, чтобы создать прокси-функцию с ее контекстом. Вы можете привязать прокси к событиям.

Вот пример:

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