Путаница в Javascript / Prototype

Question

Я создаю класс JavaScript (с использованием Prototype), который установит состояние страницы в состояние ожидания, если в течение указанного количества секунд не будет никакого движения мыши. Когда мышь перемещается, класс «разбудит» страницу, отправив сообщение в список слушателей.

Я не понимаю, что this.handlers действует в одной функции (setIdle), но не в другой (setActive). Приведенный ниже аннотированный код иллюстрирует мою проблему:

var IM2 = Class.create({

handlers: null,

initialize: function(callback, frequency) {
    this.handlers = [];
    Event.observe(document, "mousemove", this.sendActiveSignal);
    Event.observe(document, "keypress", this.sendActiveSignal);
    setInterval(this.sendIdleSignal.bind(this), 5000);
},

addListener: function(h) {
    console.log(this.handlers.size());  // it's 0 here, as expected
    this.handlers.push(h);
    console.log(this.handlers.size());  // it's 1 here, as expected
},

sendIdleSignal: function(args) {
    console.log("IDLE");
    this.handlers.each(function(i){
        i.setIdle();
    })
},

sendActiveSignal: function() {
                                    // this.handlers is undefined here. Why?
    this.handlers.each(function(r) {
        r.setActive();
    })
}

});

Answer 1

Предполагая, что вы имеете в виду, что он действителен в SendIdleSignal и недействителен в SendActiveSignal ...

Ваши слушатели событий также должны использовать bind, например:

Event.observe(document, "mousemove", this.sendActiveSignal.bind(this));
Event.observe(document, "keypress", this.sendActiveSignal.bind(this));

Кроме того, если вы используете прототип 1.6 или выше, вы можете использовать

document.observe("mousemove", this.sendActiveSignal.bind(this));
document.observe("keypress", this.sendActiveSignal.bind(this));

Кроме того, если вам нужен универсальный (независимый от фреймворка) способ сделать это, вы можете определить свои функции следующим образом:

sendActiveSignal: function() {
    var that = this;
    return function() {
        that.handlers.each(function(r) {
            r.setActive();
        });
    }
}

тогда ваши обработчики событий / setInterval можно оставить как

Event.observe(document, "keypress", this.sendActiveSignal);