Javascript对象方法和绑定函数

Javascript对象方法和绑定函数,javascript,jquery,Javascript,Jquery,我正在寻求一些帮助,因为我不太了解Javascript范围规则。在下面的示例中,我试图做的是按下页面上的按钮,然后开始监听键盘输入。一旦键盘输入开始,如果输入中断两秒钟,我想停止捕获输入,并弹出一个警报,其中包含收集到的输入的全部内容。这是我纯粹为了这个问题而举的一个例子 我看到的是,我点击按钮,开始输入。每次按键时,我都会收到到该点收集的字符串的警报。两秒钟后,没有动作超时,我看到一个内容未定义的警报。上面列出的第一个警报来自startLog。第二个警报来自叠梁闸门。当我打电话给stopLog

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

我看到的是,我点击按钮,开始输入。每次按键时,我都会收到到该点收集的字符串的警报。两秒钟后,没有动作超时,我看到一个内容未定义的警报。上面列出的第一个警报来自startLog。第二个警报来自叠梁闸门。当我打电话给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();
});
问题是这个。当您将对象方法作为事件处理程序传递时,它将丢失其对象上下文;这将引用窗口对象

有多种方法可以解决此问题,但主要问题是您需要向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
    });
};
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()
});