Javascript class variable undefined error

Question

So i'm trying to make a "game" with javascipt witc has rectangles that go arround the canvas and they have timers. When rectangles timer goes above certain limit rectangle gets a new direction.

I'm trying to make the rectangles with class so i can have multiple of them running at same time. But the problem is that i cant get the functions inside of the class pass data to eachother (i think that's the problem...).

On the draw function this.cubeLocX is not defined and this.ctx.fillStyle="#2a2b2d"; gets error Cannot set property 'fillStyle' of undefined

class cubeV3 {
    constructor(canvas) {
        //var canvas = document.getElementById('canvas');
        this.canvas = canvas;
        this.cubeLocX = 100;
        this.cubeLocY = 0;
        this.speed = getRandomNumber();
        this.dir = 0;
        this.turnTimer = 0;
        this.turnTimerMax = getRandomNumberV2(30,100);
        this.ctx = this.canvas.getContext("2d");
    }

    testClass() {
        alert('This is CubeV3 classes testfunction reporting in!');
        /*you have put the call to the private method inside the constructor of the javascript class. in that point the functions are not yet initialized
        but if you initialize the object like so:
        var test = new MyObject(); 
        and then do this:
        test.myMethod();
        it will work.*/
    }

    update() {
        this.turnTimer ++;
        if (this.turnTimer > this.turnTimerMax) {

            this.dir = this.turnTimerMax = getRandomNumberV2(1,4);
            this.turnTimer = 0;
            this.turnTimerMax = getRandomNumberV2(30,100);
        }

        if (this.dir == 1) {this.cubeLocY -=this.speed;}//UP
        if (this.dir == 2) {this.cubeLocY +=this.speed;}//DOWN
        if (this.dir == 3) {this.cubeLocX -=this.speed;}//LEFT
        if (this.dir == 4) {this.cubeLocX +=this.speed;}//RIGHT
    }

    draw(self,) {
        //this.cubeLocX = 555;
        resetCanvas();
        console.log(this.cubeLocX);
        alert(this.cubeLocX);
        this.ctx.fillStyle="#2a2b2d";
        this.ctx.fillRect(this.cube_loc_x,this.cube_loc_y,25,25);     
    }

}

So how can i make my class work?

EDIT calling the class This is placed after the draw for calling and updating the class

//setInterval(resetCanvas,10)

var testCube = new cubeV3(canvas); 
setInterval(cube, 10);
//setInterval(testCube, 10);
setInterval(testCube.update, 10);
setInterval(testCube.draw, 10);

Please show the code that calls the methods of your class, mainly the constructor and `draw`. — jcaron, Sep 07 '17 at 06:33
Most likely a duplicate of [How to access the correct `this` / context inside a callback?](https://stackoverflow.com/q/20279484/1048572) — Bergi, Sep 07 '17 at 06:35
@jcaron Updated the code to include the draw and constructor. — cmdtvt, Sep 07 '17 at 06:45
@Bergi is right, the problem is with your invocation and the use of `this`. You can either use `bind`, wrap the call inside a function, use arrow functions... — jcaron, Sep 07 '17 at 06:53
Please do not edit an answer into your question. If you want to answer, create a new answer instead (you can copy what you wrote from the revision history, but please fix all typos). — BDL, Sep 07 '17 at 11:56

score 1 · Accepted Answer · answered Sep 07 '17 at 06:33

Advice 1: "this" can be tricky in js, avoid it if it is possible.

Advice 2: maybe it is not the best Oop design to define the draw function in the rectangle class. It should be better to define a standalone draw function which has a shape argument:

function draw(shape){
  shape.ctx.fillStyle = ...
  ...
}

This way you can avoid some headache in the future also.

Javascript class variable undefined error

1 Answers1