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