JavaScript prototype & __proto__

• JavaScript’s super-happy-joy-joy easy way
• The rest of it
• Important thing no. 1
• Important thing no. 2
• Important thing no. 3
• Important thing no. 4

JavaScript’s super-happy-joy-joy easy way

JavaScript comes with a great method for creating objects that inherit from other objects.

Object.create(proto[, propertiesObject])

The propertiesObject is optional. Is supplied, the properties on the propertiesObject will be assigned to the created object.

var foo = {id: 'Foo'};
var bar = Object.create(foo)
console.log(bar.id);

The syntax for the propertiesObject isn’t what you’re use to though. We a defining properties, rather then cloning them so we need to use the syntax for this.
See “Property Attributes” on the ECMA specs for what you can set. for this, just know that the following means: “Create an object and assign it a property called theAnswer with a value of 42.

var properties = { 
    theAnswer: { 
        value: 42 
    }     
};

var foz = { id: "foz" };
var baz = Object.create(foz, properties);

log("baz.id: " + baz.id);
log("baz.theAnswer: " + baz.theAnswer);

So. Problem solved, no need to keep reading.

The rest of it

JavaScript’s prototypical OOP model is either really easy or mind-bending levels of confusing, depending on whether you’re used to the classical OOP model . I fall into the latter category and hence found that every time I thought I understood what was going on I would discover that I didn’t. Now, finally, I think I’ve got it. There were a couple of key things missing from my understanding that helped the penny to drop.

1. __proto__ and prototype are not the same thing.
2. The prototype property doesn’t form part of the prototype chain.
3. All objects have a prototype property, but they’re only used by constructor functions.
4. The constructor property is useless (really, I have no idea why it’s there).

Important thing no. 1

From the ECMAScript® 2016 Language Specification:

“The value of a constructor’s prototype property is a prototype object that is used to implement inheritance and shared properties.”

This means that the prototype property does not form part of the prototype chain.
That begs the question, what does then? That’s easy to answer, the __proto__ property does. __proto__ is often referred to by its internal, “behind-the-scenes” name [[Prototype]]. You can’t access it directly (as far as I know) but when you see it in blogs you’ll now know that it’s synonymous with __proto__.
This __proto__ is set to whatever the prototype property of the constructor is.

Important thing no. 2

Now we know that the prototype property is used to create the prototype of a new object (i.e. __proto__), it doesn’t actually form part of the chain. In fact, it’s sole job it to be referred to by the JavaScript engine when it determines what properties your new object’s __proto__ should have.
The __proto__ defines an object’s prorotype chain.

Important thing no. 3

Every object has a prototype property. It’s meaningless unless you’re actually using the new keyword.

Important thing no. 4

The constructor property is useless. It isn’t set unless you do it specifically. Don’t trust it, it has no practical use.

Diagram

Here we see how the _proto__ relates to prototype. Notice that the __proto__ of the __proto__ points to the prototype on the Object constructor.

Thanks for reading.
Please feel free to get in contact @BanksySan.