Question

I’m digging OOP for the first time but I’ve got a little problem:

var panel = {    
    img : imgs[24],
    prop : this.img.height / this.img.width,

    h : this.img.height - (scale),
    w : h/prop,

    x : center.x - (w / 2),
    y : center.y - (h / 2)    
}

panel.draw = function(){    
   g.ctx.drawImage(this.img,
      0, 0,
      this.img.width, this.img.height,
      this.x, this.y,
      this.w, this.h)
}

But it looks like declaring this.img.height results in typeError. Can someone explain why?

Also, how can I declare the method inside the object declaration? Nothing special about it: I just don’t want my code to look too messy.

Answer 1

Is your object always static to the name panel? Then

var panel = {};
panel.img = imgs[24];
panel.prop = panel.img.height / panel.img.width;
...

Is it not static but you don’t want instances of it? Then make an initialisation function to get the correct this

var panel = {   // assuming "scale" and "center" in scope
        init : function(){
            this.img = imgs[24];
            this.prop = this.img.height / this.img.width;
            this.h = this.img.height - (scale);
            this.w = this.h / this.prop;
            this.x = center.x - (this.w / 2);
            this.y = center.y - (this.h / 2);
        }
};
panel.init();
...

Do you want to have multiple instances of the object? Then make a constructor

function Panel (img) { // assuming "scale" and "center" in scope
    this.img = img;
    this.prop = img.height / img.width;
    this.h = img.height - (scale);
    this.w = this.h / this.prop;
    this.x = center.x - (this.w / 2);
    this.y = center.y - (this.h / 2);
}
Panel..draw = function(){
...

and use with var panel = new Panel( imgs[24] );