JavaScript 的数组调用和函数在 Prototype 中失败

Question

我有这个代码:

function Keyboard() {

    this.log = $('#log')[0];
    this.pressedKeys = [];

    this.bindUpKeys = function() {
        $('body').keydown(function(evt) {
            this.pressedKeys.push(evt.keyCode);

            var li = this.pressedKeys[evt.keyCode];

            if (!li) {
                li = this.log.appendChild(document.createElement('li'));
                this.pressedKeys[evt.keyCode] = li;
            }

            $(li).text('Down: ' + evt.keyCode);
            $(li).removeClass('key-up');
        });
    }

    this.bindDownKeys = function() {
        $('body').keyup(function(evt) {
            this.pressedKeys.push(evt.keyCode);

            var li = this.pressedKeys[evt.keyCode];

            if (!li) {
                li = this.log.appendChild(document.createElement('li'));
            }

            $(li).text('Up: ' + evt.keyCode);
            $(li).addClass('key-up');
        });
    }

}

我收到这些错误:

TypeError: 'undefined' is not an object (evaluating 'this.pressedKeys.push')

我想对数组做什么并不重要，它只是不断地给我带来访问错误，就好像它不存在于原型(prototype)中一样。

我做错了什么？ :( 我只是像原型(prototype)中的任何其他值一样访问数组)。对象内部的对象是否存在问题？

Answer 1

问题是在事件处理程序内部 this 并不是你想象的那样。您可以使用 bind 方法绑定(bind)事件处理函数(或者，因为看起来您正在使用 jQuery，$.proxy ):

this.bindUpKeys = function() {
    var that = this;
    $('body').keydown($.proxy(function(evt) {
        //Use `this` as normal inside here
    }, this));
}

或者您可以在事件处理程序之外存储对 this 的引用，例如

this.bindUpKeys = function() {
    var that = this;
    $('body').keydown(function(evt) {
        //Use `that` instead of `this` in here
    });
}