Javascript object declaration issue

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] );

Answer 2

You are refering to different object even if thinking you are not doing that. So in your example, on third line this is refering current scope and not the object panel you are creating. So do img and h

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

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

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

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

Should be something like

var Panel = (function() {    
    function Panel(img, scale, center) {  
       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.prototype.draw = function(ctx) {
          ctx.drawImage(this.img, 0, 0,
          this.img.width, this.img.height,
          this.x, this.y,this.w, this.h)
    }          
})():

var panel = new Panel(imgs[24], scale, center);
panel.draw(g.ctx);

Answer 3

It's because this will never be a reference to the object you're creating when using object literal syntax.

It's a reference to the outer variable scope. To use literal syntax, you'll need to create the parts that do not require a self reference, then create rest after the initialization.

var panel = {    
    img : imgs[24],

    w : h/prop,

    x : center.x - (w / 2),
    y : center.y - (h / 2)    
};
panel.prop = panel.img.height / panel.img.width;
panel.h = panel.img.height - scale;

I don't know what your h and prop variables are supposed to refer to.

If you expect them to refer to members of the object, then you need to take those out as well. And the center variable just seems to come out of nowhere.

Seems like maybe you're just guessing at how JavaScript syntax works. If so, that's a hard way to learn. I'd recommend a basic tutorial before you continue.

Answer 4

Panel object doesn't have panel.img.height property.

var panel = {    
    img :
        { height: // stuff here
        }
    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)    
}

Answer 5

this refers to the context in which panel is declared, not the panel object itself. A few workarounds :

Cache the referred object :

var img = imgs[24];
var panel = {
    img: img
  , height: img.height - scale
  , //...

Create a blank panel object and add properties one by one :

var panel = {};
panel.img = imgs[24]
panel.height = panel.img - scale;

And methods can be declared like any other property.

var panel = {
    img: imgs[24]
  , draw: function(){ g.ctx.drawImage(this.img, 0, 0) }
}