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

因为你的keydown处理程序中的this是元素本身（在这种情况下，document.body）。你需要

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

或者查看使用bind或$.proxy

Answer 2

因为this不能像您认为的那样在javascript中运行。 this是正在执行当前函数的上下文。所以，当你执行类似...... object.doThing()之类的操作时，那么在执行doThing()时，这指向了对象。但是，您可以在没有对象引用的情况下调用doThing（），然后this是全局对象。

下面是您重写的代码，使用闭包的概念来避免this schenanigans。这段代码可以进一步重构以使用原型并避免额外的内存开销，一次又一次地创建所有相同的函数，但我不想用更多的信息来破坏它。

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无法按照您最初的想法运作MDN docs for Function.prototype.apply。

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字段中以澄清您的代码并确保您引用您的想法是一种很好的做法。

在jQuery keydown之后访问属性

5 个答案: