Referencing an object property with numeric value in JavaScript

Question

I've run into a - what seems - somewhat strange problem. Let's say I have a JavaScript object like this one:

var Object = {
    Property1: 0,
    Property2: 1,
    TxtProperty: "Sample text",

    Update: function () {
        this.Property1++;                      // Doesn't work
        Object.Property2++;                    // Does work
        this.TxtProperty = "Hello world";      // Does work

        $('#prop-1').text(this.Property1);     // Prints NaN
        $('#prop-2').text(Object.Property2);   // Prints correct value
        $('#txt-prop').text(this.TxtProperty); // Prints correct value
    }
};

See this fiddle for a demonstration. Click 'Start' to start the timer and update the values. As you can see, using parseInt didn't help either.

I've tested this in Firefox, Chrome, and IE10. They all show the same behavior.

Why can't you reference a property with a numeric value using this from inside another property with a function value? Why does it work with non-numeric values? Is this a bug or is this intended?

This is not so much a real problem as we can simply use the parent object's name to update the numeric value, but I'm just curious as to why this is so.

I think this will refer to Window the way you use it. Not to parent object. — Brian G.
– Brian G., Commented May 16, 2013 at 7:49
It work because it creates a new window.TxtProperty property. — Barmar
– Barmar, Commented May 16, 2013 at 7:52
Try looking at Object.TxtProperty after that, you'll see that it didn't change. — Barmar
– Barmar, Commented May 16, 2013 at 7:53

elclanrs · Accepted Answer · 2013-05-16 08:50:19Z

2

setTimeout runs the function in the window context so this inside of it refers to window. If you bind the proper this context, then it'll work fine:

interval = setInterval(Object.Update.bind(Object), 1000);
                                     -----^------

Demo: http://jsfiddle.net/wC2uM/2/

bind only works in modern browsers so if you need support for old IE use an anonymous function:

interval = setInterval(function(){ Object.Update(); }, 1000);

Remember that in JavaScript this depends on how you call the function; it's mutable.

edited May 16, 2013 at 8:50

answered May 16, 2013 at 7:54

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

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

1 Comment

Felix Kling Over a year ago

You can simplify Object.Update.call(Object); to Object.Update(); ;)

Collectives™ on Stack Overflow

Referencing an object property with numeric value in JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related