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

JavaScript's Array call and functions fail inside Prototype

本文关键字：Prototype 失败 函数 Array 调用 JavaScript      更新时间：2023-09-26

我有这个代码：

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

我想用数组做什么并不重要，它只是不断给我访问错误，就好像它不存在在原型中一样。

我做错了什么？:(我只是像原型内的任何其他值一样访问数组）。对象内部的对象有问题吗？

问题是在事件处理程序内部this不是你想的那样。您可以将事件处理程序函数与 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
    });
}

好像它不存在在原型中。

不，确实如此。

我只是在访问数组

那是你没有的。 this 不会指向事件侦听器中的Keyboard实例。

当函数作为事件侦听器调用时，DOM 元素将是上下文（jQuery 也这样做）。请参阅 MDN 的 this 关键字概述。您可以使用闭包范围的变量来保存对实际实例的引用，例如此处所述（对此有很多问题）。

可能的快速修复：

  • $('body').keydown( (function(){...}).bind(this))
  • var that=this; $('body').keydown(function(){ that.pressedKeys...; });
相关文章：