Problem with declaring Javascript objects

Question

Problem with declaring Javascript objects

Exploring the world of OOP for the first time, encountering a small challenge:

const panel = {    
    image : imgs[24],
    proportion : this.image.height / this.image.width,

    height : this.image.height - (scale),
    width : height / proportion,

    x : center.x - (width / 2),
    y : center.y - (height / 2)    
}

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

Encountering a typeError issue when trying to declare this.image.height. Seeking an explanation for this.

Additionally, looking for a neater way to declare the method within the object to maintain code organization without clutter.

javascript oop

Answer 1

Answer №1

Is your element always tied to the name panel? If so,

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

If it's not always tied but you don't want multiple instances of it, create an initialization 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();
...

If you want to have multiple instances of the object, create 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

Is your element always tied to the name panel? If so,

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

If it's not always tied but you don't want multiple instances of it, create an initialization 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();
...

If you want to have multiple instances of the object, create 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 3

Answer №2

When utilizing object literal syntax, this will not be referencing the object being created. Instead, it will reference the outer variable scope.

To effectively use literal syntax, begin by creating the parts that do not rely on a self reference. Then, proceed with creating the remaining parts after 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;

The identity of h and prop variables is unclear. Are they supposed to refer to object members? Also, the origin of the center variable seems ambiguous.

Perhaps there is some uncertainty surrounding JavaScript syntax understanding. It could be beneficial to explore a foundational tutorial before proceeding further.

Answer 4

When utilizing object literal syntax, this will not be referencing the object being created. Instead, it will reference the outer variable scope.

To effectively use literal syntax, begin by creating the parts that do not rely on a self reference. Then, proceed with creating the remaining parts after 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;

The identity of h and prop variables is unclear. Are they supposed to refer to object members? Also, the origin of the center variable seems ambiguous.

Perhaps there is some uncertainty surrounding JavaScript syntax understanding. It could be beneficial to explore a foundational tutorial before proceeding further.

Answer 5

Answer №3

Even though you might believe otherwise, you are actually referencing a different object. In your scenario, when you use this on the third line, it is referring to the current scope and not the panel object you are creating. Therefore, references like img and h are different.

var panel = {    
    img : imgs[24],
    prop : this.img.height / this.img.width, // this does not refer to panel here

    h : this.img.height - (scale), // this.img is not the same as panel.img
    w : h/prop, // h is not equal to panel.h

    x : center.x - (w / 2), // w does not equal panel.w
    y : center.y - (h / 2)  // h is not equal to 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)
}

A better approach would be something like this:

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 6

Even though you might believe otherwise, you are actually referencing a different object. In your scenario, when you use this on the third line, it is referring to the current scope and not the panel object you are creating. Therefore, references like img and h are different.

var panel = {    
    img : imgs[24],
    prop : this.img.height / this.img.width, // this does not refer to panel here

    h : this.img.height - (scale), // this.img is not the same as panel.img
    w : h/prop, // h is not equal to panel.h

    x : center.x - (w / 2), // w does not equal panel.w
    y : center.y - (h / 2)  // h is not equal to 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)
}

A better approach would be something like this:

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 7

Answer №4

this pertains to the specific environment in which panel is defined, rather than the panel object itself. Here are a few ways to address this issue :

1. Store the referenced object in a cache :

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

2. Create an empty panel object and gradually add properties :

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

3. Functions can be declared like any other property.

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

Answer 8

this pertains to the specific environment in which panel is defined, rather than the panel object itself. Here are a few ways to address this issue :

1. Store the referenced object in a cache :

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

2. Create an empty panel object and gradually add properties :

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

3. Functions can be declared like any other property.

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

Answer 9

Answer №5

The panel object does not include the panel.img.height property.

var panel = {    
    img :
        { height: // add content 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 10

The panel object does not include the panel.img.height property.

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

Problem with declaring Javascript objects

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Cloning a table row through editing functionality in ReactJS

Redirecting with React Router outside of a route component

How does Backbone.js tackle error handling when receiving messages from Rails?

A guide on looping through an array enclosed within an object with the help of ng-repeat

The JavaScript slideshow fails to display an image during one rotation

Menu options submerged beneath the surface of a concealed container with overflow property

Having trouble with the functionality of a simple jQuery toggle menu on mobile?

Where will the user's input be stored?

Refining an array with React's filter method

Guide for animating individual mapped elements in react-native?

Attempting to instruct my chrome extension to execute a click action on a specific element found within the webpage

Steps to properly create your own angular service with XHR

An array in Javascript that contains sub-arrays within its keys

Consolidate two AJAX requests into a single callback

How to incorporate an icon into a React Bootstrap Dropdown menu

What is a common mistake when using refs in React?

Is there a way to break this down so that I can obtain an array containing the data for each month?

Breaking apart a string and mapping it to specific fields

What steps can be taken to add a radio button group to a form in order to choose between the smoking and non-smoking sections of a restaurant?

The unique format created by tinyMce is not being displayed