About the prototype object and it's role in Javascript inheritance

Question

I have only just started messing up with Javascript inheritance and can't get my hed round this one:

If I run this code:

function Foo(y) {
    this.y = y;
}

Foo.prototype.x = 1;

var Bar1 = new Foo(2);
var Bar2 = new Foo(3);

I expect to have the following "structure" in memory: I messed up in the graphic, Bar2 obviously has a value of "3" for its property "y"

And happily enough, I can confirm that, by running this code:

console.log("Prototype - x: ", Foo.prototype.x, " y: ", Foo.prototype.y);
console.log("Bar1 - x: ", Bar1.x, " y: ", Bar1.y);
console.log("Bar2 - x: ", Bar2.x, " y: ", Bar2.y);

which prints:

Prototype - x: 1 y: undefined
Bar1 - x: 1 y: 2
Bar2 - x: 1 y: 3

Correct me if I'm wrong but what is happening there is that when I try to access the property x in the Bar1 and Bar2 objects, as those objects don't localy have a property called x, I'm getting that property from the next object in the prototype chain; i.e. the one whose reference they store in their "_ proto _" property.

Now is when I get lost, because if I after that code I alter the value of x like this:

Bar1.x = 10;

when I now run

console.log("Prototype - x: ", Foo.prototype.x, " y: ", Foo.prototype.y);
console.log("Bar1 - x: ", Bar1.x, " y: ", Bar1.y);
console.log("Bar2 - x: ", Bar2.x, " y: ", Bar2.y);

what I'am getting is

Prototype - x: 1 y: undefined
Bar1 - x: 10 y: 2
Bar2 - x: 1 y: 3

instead of what I would expect :

Prototype - x: 10 y: undefined
Bar1 - x: 10 y: 2
Bar2 - x: 10 y: 3

At that moment I could only explain that by assuming that each object was creating a copy of the Foo.prototype object, but if I run this

console.log(Object.is(Foo.prototype, Bar1.__proto__), Object.is(Bar1.__proto__, Bar2.__proto__));

I get true true, so both Bar1, Bar2 are accesing the same object.

Why is Bar1 then showing a different value for x if they are both getting it from the same object?

Answer 1

This line:

Bar1.x = 10;

does not change the value of x in the prototype. Instead it creates a new property (x) for Bar1 and assigns the value of 10 to it. Bar1 therefore no longer inherits x from its prototype as it now has its own property x.

Bar2 still does, which is why it still matches the prototype value.

Answer 2

It's pretty simply:

Assignment always creates or updates the property on the object itself.

An assignment never impacts the prototype chain, even if the property exists somewhere along the chain(*).

Only reading a property traverses along the prototype chain, stopping at the object that actually has that property.

If you are interested in the technicalities, have a look at the PutValue definition in the specification.

---

(*): However, if the property exists in the prototype chain, it may have an impact on the assignment. If the property exists and is readonly (not writable), the assignment doesn't create a new property. Example:

> var obj = Object.create(Object.create({}, {x: {value: 10}}));
undefined
> obj.x
10
> obj.x = 100;
100
> obj.x
10

Answer 3

You're right about how Bar1 and Bar2 are getting their values of x. But where it breaks down is when you assign Bar1.x = 10.

When trying to access x, it first starts at the object itself before crawling down the chain. Let's assume you try to access Bar1.z. The lookup would look something like this:

1. Bar1.z
2. Bar1.prototype.z
3. Bar1.__proto__.z i.e. Foo.prototype
4. Object.prototype.z (since all objects naturally inherit from Object
5. z not found, returns undefined

By assigning Bar1.x, you effectively shadow the value of Bar1.__proto__.x since it will appear first in the lookup.