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

Question

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

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

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

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

Ура, Чарли

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

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

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

Answer 3

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

Вот пример:

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