Trying to add 10 to this.y variable, but returns NaN

Question

I seem to have done something wrong and cant find any solutions. I've tried to convert them into numbers and tried += but i get NaN.

function circle() {
    this.x = 60;
    this.y = 200;
    this.draw = function() {
        ellipse(this.x, this.y, 20, "green");
    };


    this.move = function() {
        $(document).keydown(function(e) {
            //  console.log(e.keyCode);
            if (e.keyCode === 68) {
                this.y += 1;
                console.log(this.y);
            }
        });
    };

}

Might it be because they are not variables?

thanks :)

Your `onkeydown` handler has its context changed. Either use ES6 arrow functions or manually `bind` the context. `$().keydown(() => console.log(this));` — ste2425, Oct 31 '16 at 16:04
@mplungjan It is the scope. Your `this` in `circle.move` refers to the window event, not the circle. — Emil S. Jørgensen, Oct 31 '16 at 16:05
@EmilS.Jørgensen: No, `this` and scope have very little to do with one another. Scope is about what identifiers are accessible (in scope). `this` is about the value of the pseudo-argument `this`. Basically the only ways in which they're related at all are A) Arrow functions, which close over `this`, and B) In ES5 and earlier, scope only changed with functions, and functions got called with the pseudo-argument, so people conflated the two unrelated concepts. — T.J. Crowder, Oct 31 '16 at 16:05
Thanks! sorry didnt know what to look for. sorry bout the duplicate :I — Myhre, Oct 31 '16 at 16:08
@T.J.Crowder - `this` and `scope of this` is mentioned in almost all articles and books and SO answers. So it is understandable by most people. Please show me where the "scope" of "this" has nothing to do with each other - scope is mentioned 7 times in your duplicate — mplungjan, Oct 31 '16 at 16:09
@Myhre marking a question as a duplicate is not the same as a close vote. It helps the OP and future readers to find other contexts where the same issue is observed; which is good. — Majid Fouladpour, Oct 31 '16 at 16:14
@MajidFouladpour Thats good! I hope it might help someone else too. I found what i needed atleast. Thanks for all the answers! — Myhre, Oct 31 '16 at 16:21
@mplungjan: Yes. It's a very common misconception. Which is why I comment on it when I see it. — T.J. Crowder, Oct 31 '16 at 16:35

Krzysztof Atłasik · Accepted Answer · 2016-10-31T16:12:21.017

This is because this inside keydown callback is not what your expecting.

One way to solve is to save this of outer scope to variable.

var me = this;
me.x = 60;
me.y = 200;
....

me.y += 1; //use me istead of this.
console.log(me.y);

Other way could be to use es6 lambas, bacause it would bind scope right.

$(document).keydown(e => {//lamba instead of function
    if (e.keyCode === 68) {
        this.y += 1;
        console.log(this.y);
    }
});

You can also use bind function to bind scope.

$(document).keydown((function(e) {//lamba instead of function
    if (e.keyCode === 68) {
        this.y += 1;
        console.log(this.y);
    }
}).bind(this));

Trying to add 10 to this.y variable, but returns NaN

1 Answers1