Im trying to get my head around javascript prototyping & possible inheritance, but I'm certainly missing something. Let's start with simple constructor (function Counter()), adding simple property and instantiation of object:

function Counter() { this.a = "first"; };
Counter.prototype.b = "second";
var counter = new Counter();

At this point, counter.a returns "first", counter.b returns "second" and counter.c is of course undefined which is all understandable. Let's add another property to constructor's prototype:

Counter.prototype.c = "third";  

Right now, counter.c would return "third". But... we've changed our mind, lets get rid of those properties:

Counter.prototype = {};

Using simple logic, while overwriting counter prototype's prototype property, we would lose the properties for counter which we've added before to Counter.prototype. But that's not the case - counter.c Returns "third". I am lost here. So... let's try overwriting the value:

Counter.prototype.c = "fourth hohoho";

Nothing changes, counter.c still returns "third".

Why did it not succeed to remove the properties? What am I missing?

Im trying to get my head around javascript prototyping & possible inheritance, but I'm certainly missing something. Let's start with simple constructor (function Counter()), adding simple property and instantiation of object:

function Counter() { this.a = "first"; };
Counter.prototype.b = "second";
var counter = new Counter();

At this point, counter.a returns "first", counter.b returns "second" and counter.c is of course undefined which is all understandable. Let's add another property to constructor's prototype:

Counter.prototype.c = "third";  

Right now, counter.c would return "third". But... we've changed our mind, lets get rid of those properties:

Counter.prototype = {};

Using simple logic, while overwriting counter prototype's prototype property, we would lose the properties for counter which we've added before to Counter.prototype. But that's not the case - counter.c Returns "third". I am lost here. So... let's try overwriting the value:

Counter.prototype.c = "fourth hohoho";

Nothing changes, counter.c still returns "third".

Why did it not succeed to remove the properties? What am I missing?

• javascript
• inheritance
• prototype

• Look up how prototypes work in Javascript. – mash Commented May 22, 2013 at 14:54
• The constructor merely establishes the relationship between the new object and the constructor's .prototype object. After that point, the constructor is pretty much irrelevant. The relationship between the two objects is all that matters. – user1106925 Commented May 22, 2013 at 15:01
• Duh, it turns out it's that trivial. – mrówa Commented May 23, 2013 at 19:34

3 Answers 3

When you create your object, a reference to its prototype object is added to the prototype.

You can augment that prototype object, and because the instances share the reference, those changes will be reflected in any existing instances.

However if you overwrite the prototype object, the previously created instances still hold a reference to the original prototype object.

It's the same as what happens with this code:

var a = {};
var b = a;

a.foo = 'bar';    // augment 'a'
b.foo === 'bar';  // true

a = {};           // overwrite 'a'
b.foo === 'bar';  // still true

You can add/remove properties from a prototype object dynamically, but you can't replace the prototype object of instances that have been already been created. In your example, instances created after you replaced the constructor's prototype property will get the new prototype, but the ones created before that will keep a reference to the former object.

If you want to clear some property from the prototype, remove them from the original object, using the delete operator:

delete Counter.prototype.c;

Are you sure about this? Try:

function fa () {this.a=1}
var fb = new fa ();
fa.a = 2;
fa.prototype.a = 3;
var fc = new fa ();
console.log (fa.a, fb.a, fc.a);