Javascript object instance property getting set unexpectedly

Question

I have the following code:

function Foo() {
    Foo.prototype.test = 0;
}

Foo.prototype.incTest = function() {
    Foo.prototype.test++;
};

Foo.prototype.getTest = function(name) {
    console.log(name +" this: " + this.test + " proto: " + Foo.prototype.test);
};

var bar = new Foo();
var baz = new Foo();

bar.getTest('bar');
bar.incTest();
bar.getTest('bar');

baz.incTest();
bar.getTest('bar');
baz.getTest('baz');

predictably the output is:

bar this: 0 proto: 0
bar this: 1 proto: 1 
bar this: 2 proto: 2 
baz this: 2 proto: 2

Now I try to take advantage of this looking up the prototype chain, and change incTest to :

Foo.prototype.incTest = function() {
    this.test++;
};

This gives me completely different output!

bar this: 0 proto: 0 
bar this: 1 proto: 0 
bar this: 1 proto: 0 
baz this: 1 proto: 0

Shouldn't this.test reference the Foo prototype property? What exactly is going on here?

EDIT:

Furthermore, changing the line to Foo.prototype.test = this.test++; also produces the second output, and I'm not sure why.

EDIT 2:

Solution to first edit was postfix vs. prefix. Prefix increment produces first output.

thefourtheye · Accepted Answer · 2014-03-28 07:21:29Z

2

First case:

You were incrementing only the prototype variable, which will be shared by all the instances of the prototype object.

The important thing to be noted here is, when you access the test with this.test in the first case, JavaScript tries to find the test in this (current object). It fails to find it and it goes up the ladder in the prototype chain. It finds test in the Foo.prototype and returns that value. That is why you were getting same values for this.test and Foo.prototype.test.

Second case:

You were incrementing this.test. this.test++ can be understood like this

this.test = this.test + 1

Now, it fetches the value of test from the pototype chain (Foo.prototype.test will be used, which is 0), adds 1 to it and stores that result in the test member of the current object. So, you are creating a new member in this called test. That is why the value of it is different from Foo.prototype.test.

You can confirm this by adding one more method, like this

Foo.prototype.deleteTest = function () {
    delete this.test;
}

...
...
bar.deleteTest();
bar.getTest('bar');

Now bar.getTest will print 0, because we deleted the test from this, with deleteTest(). So, it will go up the ladder and find the test in Foo.prototype, which is 0.

edited Mar 28, 2014 at 7:21

answered Mar 28, 2014 at 7:15

thefourtheye

241k53 gold badges466 silver badges505 bronze badges

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

4 Comments

moesef Over a year ago

I see. It didn't dawn on my that this.test++ is equivalent to this.test = this.test + 1. The output makes sense if viewed this way. Thanks!

moesef Over a year ago

a further question. Foo.prototype.test = (this.test++) produces the second output... why?

thefourtheye Over a year ago

@moesef because, you are incrmenting this.test and assigning the value before incrementing to Foo.prototype.test. (Remember: var++ is postfix operator). So, the Food.prototype.test's value will be one less. Try Foo.prototype.test = ++this.test;, you ll be able to understand the difference :)

moesef Over a year ago

yea. just tried that. made the difference that I was expecting. Thanks for the help!

Evan Knowles · Accepted Answer · 2014-03-28 07:09:20Z

-1

The this will reference the current instance of the function, not the prototype.

answered Mar 28, 2014 at 7:09

Evan Knowles

7,5592 gold badges41 silver badges73 bronze badges

4 Comments

moesef Over a year ago

right. but if the current instance does not have the property test, shouldn't it resolve to the prototype's test? otherwise, this.test would be undefined and incrementing undefined gives NaN

Evan Knowles Over a year ago

The prototype has the property, so all of the instances inherit the property but they have their own instance.

moesef Over a year ago

I don't believe that is true. Otherwise the first output wouldn't happen. (ie. changing the prototype's test property value wouldn't change the object's test property)

Evan Knowles Over a year ago

Before the object has its own instance it automatically uses the prototype's instance. Once you set its own instance, it uses it going forwards.

Collectives™ on Stack Overflow

Javascript object instance property getting set unexpectedly

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related