Is this the behaviour I should expect to see using Javascript prototype inheritance?

Question

I am new to Javascript and have a question about using inheritance with it

This article has been helpful so far (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#More_flexible_constructors), but the behaviour I am observing in Chrome's debugger does not seem to be matching what I'd expect to see.

I have two cases:

Base = function () {
    this.value = 0;
};

Base.prototype.constructor = Base;

Derived = function () {
    Base.call(this);
};

Derived.prototype = new Base();
Derived.prototype.constructor = Derived;

In the debugger I see this:

After stepping over the assignment, I see this

The value in the instance has changed but the value in the prototype has not. Is this to be expected?

The second approach I do not quite understand is this (referenced here again - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#More_flexible_constructors (see the code snipped at the bottom of section 'Property Inheritance Revisited')

Base = function () {
};

Base.prototype.constructor = Base;
Base.prototype.value = 0;

// Derived as before...

and after the assignment

Value has been added as a new property. Shouldn't this have changed the value in the prototype? Or do I explicitly need to access the value by going through the prototype - e.g. derived.value.prototype.value = 5

Any information on this would be greatly appreciated!

Thanks!

UPDATE:

Thank you to everyone who responded, it turns out it was to do with my not using Object.create at the appropriate time. I updated my code to this:

and in the debugger I got what I expected:

This looks right! :)

Thank you to @sixfingeredman and @Bergi for your help!

Answer 1

First, while not on topic, remove this line:

Base.prototype.constructor = Base;

It isn't doing anything useful.

Now to your question, yes, the behavior is expected. Imagine if it updated the .prototype. Because the .prototype is shared between all instances, all instances would see the update. That for sure wouldn't be what you want.

When you did this:

var derived = new Derived();

you created a new object that inherits from Derived.prototype.

And when you did this:

derived.value = 1;

you assigned a value directly to that new object.

So before the assignment, the chain of inheritance looked like this:

  derived            Derived.prototype      Base.prototype       Object.prototype
+-----------+         +-----------+         +-----------+         +-----------+
|           |         |           |         |           |         |           |
|           |---------|  value:0  |---------|           |---------|           |
|           |         |           |         |           |         |           |
+-----------+         +-----------+         +-----------+         +-----------+

And after the assignment, it looks like this:

  derived            Derived.prototype      Base.prototype       Object.prototype
+-----------+         +-----------+         +-----------+         +-----------+
|           |         |           |         |           |         |           |
|  value:1  |---------|  value:0  |---------|           |---------|           |
|           |         |           |         |           |         |           |
+-----------+         +-----------+         +-----------+         +-----------+

So before the assignment, if you looked up value on your derived object, it wouldn't be found, so it would jump over to Derived.prototype, where it would find it.

But after the assignment, the value would be found directly on your derived object.

---

And with your second way, the prototype chain would start of looking like this instead:

  derived            Derived.prototype      Base.prototype       Object.prototype
+-----------+         +-----------+         +-----------+         +-----------+
|           |         |           |         |           |         |           |
|           |---------|           |---------|  value:0  |---------|           |
|           |         |           |         |           |         |           |
+-----------+         +-----------+         +-----------+         +-----------+

So when looking up value on derived, it would traverse from derived to Derived.prototype to Base.prototype before it finds the value property.

---

So let's say you create a bunch of objects from the Derived constructor. The sketches above would change so that each one of the objects you created would point to Derived.prototype.

  derived_1
+-----------+        
|           |
|           |
|           |
+-----------+
             \______
                    \
                     \
  derived_2          Derived.prototype      Base.prototype       Object.prototype
+-----------+         +-----------+         +-----------+         +-----------+
|           |         |           |         |           |         |           |
|           |---------|           |---------|  value:0  |---------|           |
|           |         |           |         |           |         |           |
+-----------+         +-----------+         +-----------+         +-----------+
                      /
               ______/
  derived_3   /
+-----------+        
|           |
|           |
|           |
+-----------+        

Now you can probably see why you don't want to update the prototype.

If we did derived_1.value = 42 and if it updated the Derived.prototype object, then when you went to look up value from derived_2 and derived_3, you'd get the value that you assigned to derived_1.

Answer 2

Value has been added as a new property. Shouldn't this have changed the value in the prototype?

No, this behaviour is expected. Properties are inherited only on "getting", not on setting. Once you assign a value to a property of an object¹, the property on that object is changed (or created).

_{1: except there is an accessor property (setter function) on the prototype}

Or do I explicitly need to access the value by going through the prototype - e.g. derived.value.prototype.value = 5

To change the value on the prototype, you would need to assign it on the prototype, yes. In your case, that would be

Derived.prototype.value = 5;

or

Object.getPrototypeOf(derived).value = 5;

Btw, notice that the property (which is created per-instance in the Base constructor) should not exist at all on Derived.prototype - see What is the reason to use the 'new' keyword at Derived.prototype = new Base. Instead of Derived.prototype = new Base; you should be using

Derived.prototype = Object.create(Base.prototype);