javascript - jQuery keydown 后访问属性

Question

我有一个名为 player 的对象

function Player(_x, _y, _speed) {
    this.x = _x;

    this.getX = function() {
        return this.x;
    };

    this.handleKeyDown = function(event) {
        console.log(this.x); // undefined
    };

    $(document.body).keydown(this.handleKeyDown);
}

为什么“handleKeyDown”看不到我的 x 属性？我该如何解决它？

Answer 1

因为this您的 keydown 处理程序中的 是元素本身（在本例中为document.body）。你需要要么

var self = this;
$(document.body).keydown(function() { self.handleKeyDown() });

或查看使用bind或$.proxy

Answer 2

因为this它不像你认为的那样在 javascript 中工作。 this是执行当前函数的上下文。因此，当您执行类似...object.doThing()的操作时，执行doThing()this 时将指向对象。但是，您可以在没有对象引用的情况下调用 doThing()，然后this是全局对象。

下面是您重写的代码，以使用闭包的概念来避免this恶作剧。可以进一步重构此代码以使用原型，并避免一遍又一遍地创建所有相同函数的额外内存开销，但我不想用比需要的更多信息来处理它。

function Player(_x, _y, _speed) {
    var x = _x;

    var getX = function() {
        return x;
    };

    var handleKeyDown = function(event) {
        console.log(x);
    };

    $(document.body).keydown(handleKeyDown);
}

Javascript 中的一个令人大开眼界的方法表明它this的运行方式与您最初认为的方式不同，它是Function.prototype.apply 的 MDN 文档。

Answer 3

如果使用 ES5，您可以使用.bind（或在旧浏览器上，填充它，或使用$.proxy）来确保this正确设置：

this.handleKeyDown = function(event) {
    console.log(this.x);
}.bind(this);

或者你可以this在你的词法范围内维护一个外部引用：

var self = this;
this.handleKeyDown = function(event) {
    console.log(self.x);
};

Answer 4

这里this是'document.body'，而不是对象Player

Answer 5

因为this代表getX函数，试试这个：

function Player(_x, _y, _speed) {
    var self = this;
    self.x = _x;

    self.getX = function() {
        return self.x;
    };

    self.handleKeyDown = function(event) {
        console.log(self.x);
    };

    $(document.body).keydown(self.handleKeyDown);
}

编辑：嗯，我读得很快，我的意思是handleKeyDown。无论如何，事情是this变化的上下文，所以将它存储在一个self字段中以澄清您的代码并确保您引用您的想法是一个好习惯。