Object attribute exists but returns undefined?

Question

I have a custom class/object in a script. In one of the object methods, when I run the following commands:

MapLabel.prototype.show = function()
{
    console.log(this);         // Here are the
    console.log(this.canvas);  // lines in question

    if (!this.canvas) // this is not giving the expected result
    {
        console.log('canvas doesnt exist to show');
        return;
    }

    console.log('showing maplabel');
    this.visible = true;

    this.canvas.style['visibility'] = 'visible';
    this.marker.setVisible(true);
}

I get the following:

MapLabel {gm_accessors_: Object, fontFamily: "'Droid Sans', 'Helvetica Neue', 
Helvetica, Arial, sans-serif", gm_bindings_: Object, fontSize: 14, fontColor: "#FFFFFF"…}
__e3_: Object
align: "center"
canvas: <canvas>
fontColor: "#FFFFFF"
fontFamily: "'Droid Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif"
fontSize: 14
gm_accessors_: Object
gm_bindings_: Object
gm_props_: Hu
id: 216
map: xh
marker: Ah
markerImage: Qh.MarkerImage
minZoom: 5
position: Q
strokeColor: "#000000"
strokeWeight: 4
text: "Sometext"
visible: false
zIndex: 100
__proto__: Dh

undefined    // <---- this.canvas = undefined even though it exists?

You can see in the output that this.canvas exists and has a value. But when console.log(this.canvas) is run immediately afterwords, it returns undefined.

Is there something I'm missing here?

Updated: I added the function that the code is being called in

updated with the classes method that the code is being run in. — Jake Wilson
– Jake Wilson, Commented Jan 6, 2013 at 22:01
Maybe I am missing something but it looks like everything from _e3_ down is not part of MapLabel. I would expect all of that stuff to be within the {} — Colin Pear
– Colin Pear, Commented Jan 6, 2013 at 22:06
Well the ... at the end of the {} is just what Chrome dev tools spits out cause it doesn't want to list everything. It's not until I expand it that it shows all the attributes in alphabetical order. — Jake Wilson
– Jake Wilson, Commented Jan 6, 2013 at 22:24

jevakallio · Accepted Answer · 2013-01-06 22:35:03Z

Just a wild guess, but the "problem" could be with the Chrome console. When you output the this context into the debugger, the console shows the current value at the time of inspecting, not at the time of execution.

Take a look at this fiddle. When you click the button, you'll see this in the console:

The current value is: {"hello":"world"} 
The this context is > Thing {hello: "world"} 
changing value of this.hello... 
The current value is: {"hello":"Cleveland"}

Now open the object inspector by clicking the arrow in front of > Thing {hello: "world"}, and you'll see:

The current value is: {"hello":"world"} 
The this context is  Thing {hello: "world"}
  hello: "Cleveland"                              <-- Surprise!
  test: function () {
  __proto__: Thing
changing value of this.hello... 
The current value is: {"hello":"Cleveland"}

In which case this.canvas really is undefined at the time of execution.

To make sure, you can console.log(this.canvas) instead.

Collectives™ on Stack Overflow

Object attribute exists but returns undefined?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related