'this' (inside method) doesn't refer back to original object?

Question

I have an object as so:

let game = {
    canvas: document.getElementById('main_canvas').getContext("2d"),
    clear: function(){
        this.canvas.clearRect(0,0,400,400);
    },
    update: function(){
        this.clear();
        //more code
    },
};

In my clear method everything works using 'this' referring to 'game', however when I use 'this' in the 'update' method it doesn't refer to 'game'? When i use game.clear(); everything works, but with 'this' i get undefined. If anyone know the reason for this please post a response. I have recently learned about objects and know that arrow functions don't give a 'this', but thought anonymous functions like the ones above would allow me to refer to the 'parent' or owner object.

The way you are using `this` is the way you should use it with constructor functions (when you make an instance of the object via invoking a function with `new`), not with static object literals. — Scott Marcus, Oct 17 '17 at 16:26
The value of `this` depends on how a function is called. So show us how `game.update` is called. Likely a duplicate of [How to access the correct `this` inside a callback?](https://stackoverflow.com/q/20279484/218196) — Felix Kling, Oct 17 '17 at 16:27
You should also read [How does the “this” keyword work?](https://stackoverflow.com/q/3127429/218196), https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this and https://github.com/getify/You-Dont-Know-JS/tree/master/this%20%26%20object%20prototypes — Felix Kling, Oct 17 '17 at 16:28

Derek Lawrence · Answer 1 · 2017-10-17T16:45:26.423

0

You need to use .bind

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind

This essentially binds it to the object where the method is created.

it should look something like this.

let game = {
    canvas: document.getElementById('main_canvas').getContext("2d"),
    clear: function(){
        this.canvas.clearRect(0,0,400,400);
    }.bind(this),
    update: function(){
        this.clear();
        //more code
    }.bind(this),
};

edited Oct 17 '17 at 16:45

answered Oct 17 '17 at 16:27

Derek Lawrence

993
1
9
25

Or do `game.update()`, which will work, rather than something like `callback = game.update; callback()`, which will not work. – ArneHugo Oct 17 '17 at 16:29
1

And if there is ES6 support (as using a transpiler like babel) can use arrow function. – Christian Benseler Oct 17 '17 at 16:29
You might want to show how they'd apply `.bind` to their case. – Felix Kling Oct 17 '17 at 16:30
2

@ChristianBenseler: Arrow functions will most likely not be a solution to the OP's problem. Arrow functions are primarily useful if you are trying to access `this` inside a callback inside a method. But here it seems the OP is simply calling `game.update` "incorrectly". – Felix Kling Oct 17 '17 at 16:30
@FelixKling you are right. I made a mistake, I misinterpreted the code and thought that 'game' was already an instance of an object (such as 'game is instanceof Game'). – Christian Benseler Oct 17 '17 at 16:35
1

Your example is incorrect. `this` in `.bind(this)` won't refer to `game`. – Felix Kling Oct 17 '17 at 18:07

'this' (inside method) doesn't refer back to original object?

1 Answers1