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.

I may have missed something, but what is "scale" in this example referring to? — Jordan Denison
– Jordan Denison, Commented Oct 3, 2012 at 1:05
don't worry: it is a variable declared elsewhere in the code :) I could remove it but I would still get the same typeError — Saturnix
– Saturnix, Commented Oct 3, 2012 at 1:06
Hint: this is not the object you are look^H^H^H^H trying to refer to — Ray Toal
– Ray Toal, Commented Oct 3, 2012 at 1:14

Paul S. · Accepted Answer · 2012-10-03 01:33:22Z

2

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

edited Oct 3, 2012 at 1:33

answered Oct 3, 2012 at 1:25

Paul S.

66.6k9 gold badges129 silver badges143 bronze badges

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

2 Comments

I Hate Lazy Over a year ago

This won't work prop : panel.img.height / panel.img.width. You can't refer to an object during its instantiation when using literal syntax. During its creation, panel will be undefined.

Saturnix Over a year ago

everything have much more sense now. Thanks!

I Hate Lazy · Accepted Answer · 2012-10-03 01:19:57Z

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.

vittore · Accepted Answer · 2012-10-03 01:23:47Z

1

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

edited Oct 3, 2012 at 1:23

answered Oct 3, 2012 at 1:09

vittore

17.6k6 gold badges46 silver badges84 bronze badges

1 Comment

Daedalus Over a year ago

This could have been a comment, given you don't actually solve the OP's problem.

Crogo · Accepted Answer · 2012-10-03 01:25:38Z

0

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) }
}

answered Oct 3, 2012 at 1:25

Crogo

4934 silver badges8 bronze badges

Comments

pb2q · Accepted Answer · 2012-10-03 05:06:06Z

0

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)    
}

edited Oct 3, 2012 at 5:06

pb2q

59.9k19 gold badges150 silver badges152 bronze badges

answered Oct 3, 2012 at 1:13

Den T

1574 bronze badges

Collectives™ on Stack Overflow

Javascript object declaration issue

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related