Javascript/原型范围混淆答案

【问题标题】：Javascript/Prototype scope confusionJavascript/原型范围混淆
【发布时间】：2009-06-09 14:44:32
【问题描述】：

我正在创建一个 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();
    })
}

});

【问题讨论】：

对象末尾有一个额外的逗号，这可能会产生一些奇怪的错误，但我怀疑这就是问题所在。如果您在 sendActive() 中执行 console.log(this)，会记录什么？

标签： javascript scope prototypejs

【解决方案1】：

假设您的意思是它在 SendIdleSignal 中有效而在 SendActiveSignal 中无效...

您的事件侦听器也应该使用绑定，如下所示：

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

【讨论】：