Javascript constructor not working

Question

I posted this on gamedev.stackexchange but was referred here so I'll try. I've got this simple menu that is a function, with a mainmenu.prototype.Render to draw it to the screen. Inside the mainmenu function i would like to make an array of objects containing the buttons x, y positions and the .src.

This is my current code that works, so no problem with the function itself:

this.Mainmenu = function() {
}

this.Mainmenu.prototype.Render = function() {
    imgPause = new Image();
    imgPause.src = 'img/pause.png';

    c.drawImage(imgPause, canvas.width - 42, 10);
}
var mainmenu = new self.Mainmenu();

What I would like the final result to look like, but can't get to work (I've included the error in a comment):

this.Mainmenu = function() {
    this.button = function(src, X, Y) {
        this = new Image(); // Gives error "Invalid left-hand side in assignement"
        this.src = src;
        this.X = X;
        this.Y = Y;
    }
    this.buttons = [pause = new this.button(src, X, Y)];
}

this.Mainmenu.prototype.Render = function() {
    for (i = 0; i < this.buttons.length; i++) {
        c.drawImage(this.src, this.X, this.Y);
    }
}
var mainmenu = new self.Mainmenu();

But it doesn't work, if anyone can identify where my mistake is it would be appreciated, my patience is about to run out.

Do you know what this is, and do you think it's a great idea to overwrite it with a new image ? — adeneo
– adeneo, Commented Sep 29, 2013 at 20:58
Your mistake is in trying to assign something to this, which is the Javascript keyword for the current context, and I believe is read-only. I can't imagine what the effect of overwriting it with an Image object might be. — user1864610
– user1864610, Commented Sep 29, 2013 at 21:00
Allright, I thought it could refer to current object that way, how can I do "objectName = new Image()" in a constructor? — justanotherhobbyist
– justanotherhobbyist, Commented Sep 29, 2013 at 21:02

Nikola Dimitroff · Accepted Answer · 2013-09-29 21:04:40Z

3

Well, your mistake is exactly what your js interpreter says it is - the left side of your assignment is invalid. Namely, you cannot assign this to anything, that's a rule of thumb in all languages that have the this word. The reasoning behind that is obvious - this denotes the current context of the function, the hidden argument of its. If you could overwrite it dynamically, you could alter the behaviour of every single function that is using yours thus the whole program.

How not to use this in this broken way:

this.MainMenu = function() {
    this.Button = function(src, X, Y) {
        var image = new Image();
        image.src = src;
        image.X = X;
        image.Y = Y;
        return image;
    }
    this.buttons = [pause = new this.Button(src, X, Y)];
}

Also, name your classes with PascalCase (Button, not button) and your variables with camelCase EVERYWHERE (x, not X).

answered Sep 29, 2013 at 21:04

Nikola Dimitroff

6,2572 gold badges28 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

justanotherhobbyist Over a year ago

Cool, it worked but now drawImage is messing up, this.src etc obviously wont work, tried image.src and it gives errors aswell. How would i access it?

Nikola Dimitroff Over a year ago

Show us the code that draws the button. My guess is that the image is on the web, hence it won't be loaded instantly and if you attempt to draw an image before it's loaded you'll get errors.

justanotherhobbyist Over a year ago

Actually no, it was even more retarded than that. Didnt change the drawImage to take into account array index. Rofl, this is why you dont code tired.

Paul Rad · Accepted Answer · 2013-09-29 21:01:54Z

1

You cannot do this

this.button = function(src, X, Y) {
    this = new Image(); // Gives error "Invalid left-hand side in assignement"
}

this represents the current instance of Mainmenu. You cannot override an instance by another instance. No sense.

answered Sep 29, 2013 at 21:01

Paul Rad

4,8821 gold badge26 silver badges23 bronze badges

2 Comments

justanotherhobbyist Over a year ago

Yeah got that, how can I do the same as "name = new Image()" in the constructor? What I've tried is giving worse errors than overriding this

Paul Rad Over a year ago

@Nikola Dimitroff replied to this question ;)

Collectives™ on Stack Overflow

Javascript constructor not working

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related