0

我正在寻求帮助，因为我认为我不太了解 Javascript 范围规则。我在下面的示例中尝试做的是在页面上按下一个按钮，然后开始监听键盘输入。一旦键盘输入开始，如果输入中断两秒钟，我想停止捕获输入并弹出一个警报，其中包含收集到该点的输入的全部内容。这是我纯粹为这个问题做的一个例子。

我看到的是我单击按钮并开始输入输入。在每次按键时，都会提醒我收集到该点的字符串。两秒钟后，无操作超时发生，我看到一条内容为“未定义”的警报。上面列出的第一个警报来自 startLog()。第二个警报来自 stopLog()。当我调用 stopLog 告诉我 this.message 未定义时，我做错了什么？

function Logger() {
    this.message = '';
    this.listenTimer;

    this.startLog = function() {
        this.message = '';
        $(document).bind('keypress', {this_obj:this}, function(event) {
            event.preventDefault();
            var data = event.data;
            clearTimeout(data.this_obj.listenTimer);
            data.this_obj.message += String.fromCharCode(event.which);
            alert(data.this_obj.message);
            data.this_obj.listenTimer = setTimeout(data.this_obj.stopLog, 2000);
        });
    };

    this.stopLog = function() {
        $(document).unbind("keypress");
        alert(this.message);
    };
}

var k = new Logger();
$('.logging-button').click(function() {
    k.startLog();
});
4

2 回答 2

0

问题是this。当您将对象方法作为事件处理程序传递时，它会丢失其对象上下文；this将引用window对象。

有多种方法可以解决此问题，但主要问题是您需要传递setTimeout一个仍将引用正确上下文的闭包：

setTimeout(function() { data.this_obj.stopLog() }, 2000);

另外，您可以通过使用闭包来引用对象来节省一些不必要的代码，而不是将其绑定为event.data：

this.startLog = function() {
    this.message = '';
    var this_obj = this;
    $(document).bind('keypress', function(event) {
        event.preventDefault();
        clearTimeout(this_obj.listenTimer);
        // etc
    });
};
于 2012-05-01T16:50:49.297 回答
0 
var k = new Logger();

$('.logging-button').click(function() {
    k.startLog.apply(this); 
    //Setting context of "this" so that it refers to element even in startLog()
});
于 2012-05-01T17:04:50.433 回答