jQuery按键后访问属性

Question

I have a object called 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);
}

Why doesn't "handleKeyDown" not see my x Property? And how do I work around it?

Answer 1

Because the this in your keydown handler is the element itself (in this case, document.body ). You need to either

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

Or look at using bind or $.proxy

Answer 2

Because this doesn't work the way you think it does in javascript. this is the context in which the current function is being executed. So when you do something like... object.doThing() , then while executing doThing() this is pointing to object. However you could call doThing() without the object reference, then this is the global object.

Below is the code you gave rewritten to use the concept of closures to avoid the this schenanigans. This code can be further refactored to use prototypes and avoid the extra memory overhead of creating all the same functions over and over again but I don't want to junk this up with more information than is needed.

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

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

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

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

An eye-opening method in Javascript that shows that this does not operate the way you initially thought would be the MDN docs for Function.prototype.apply .

Answer 3

If using ES5, you can use .bind (or on older browsers, shim it, or use $.proxy ) to ensure that this is correctly set:

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

or you can maintain an external reference to this in your lexical scope:

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

Answer 4

this是这里的“ document.body”，而不是对象Player

Answer 5

Because this represents the getX function, try this :

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);
}

Edit : meh, I read to fast, I meant handleKeyDown. Anyway, the thing is that the context of this changes, so it is a good practice to store it in a self field to clarify your code and make sure you are refering to what you think.