JavaScript Prototypes

In JavaScript, objects are the only construct. Each object has a special private property [[Prototype]], that is either null or links to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype, which is the final link in the prototype chain. Nearly all objects in JavaScript are instances of Object which sits on the top of a prototype chain. When you reference a property on an object, if that property doesn’t exist, JavaScript will automatically use that object’s internal prototype link to find another object to look for the property on. The internal prototype reference linkage from one object to its prototype happens at the time the object is created.

See the Pen thecodelog.com - JS Prototypes 1 by Deano (@deangilewicz) on CodePen.

Above, the property a is not found on thing so it goes up the prototype chain. This process continues until either a matching property name is found, or the [[Prototype]] chain ends. Since it is found the value is returned. Property b exists on thing so the value is returned and the [[Prototype]] chain is not consulted. Property c is not found on thing nor its [[Prototype]] so undefined is returned. The property d (method) is not found on thing but instead on the next level up the [[Prototype]] chain so that value is returned. In this case it is a function and is invoked.

See the Pen thecodelog.com - JS Prototypes 2 by Deano (@deangilewicz) on CodePen.

Shadowing occurs when a property name exists on the object and the same property name also exists on the object’s [[Prototype]] chain.

See the Pen thecodelog.com - JS Prototypes 3 by Deano (@deangilewicz) on CodePen.

Shadowing can even occur implicitly in subtle ways, so care must be taken if trying to avoid it.

See the Pen thecodelog.com - JS Prototypes 4 by Deano (@deangilewicz) on CodePen.

It seems that myObj.a++ should increment the anotherObj.a property (through the prototype chain), instead the ++ operation corresponds to myObj.a = myObj.a + 1. The result is looking up a property via [[Prototype]] to get the current value 2 from anotherObj.a, incrementing the value by 1, then assigning the 3 value to a new shadowed property a on myObj. In this case, to increment anotherObj.a, the only way is anotherObj.a++ In the following code, each object created from calling new C1() will end up [[Prototype]] linked to this C1.prototype object. The C1.prototype object {} by default gets a public, nonenumerable property called .constructor, and this property is a reference back to the function that the object is associated with.

See the Pen thecodelog.com - JS Prototypes 5 by Deano (@deangilewicz) on CodePen.

The following is one way to set up a prototype chain using a function constructor.

See the Pen thecodelog.com - JS Prototypes 6 by Deano (@deangilewicz) on CodePen.

Here is another way:

See the Pen thecodelog.com - JS Prototypes 7 by Deano (@deangilewicz) on CodePen.

Object.create() creates a new object linked to the object we specify, which gives us all the power of delegation and the [Prototype]] mechanism:

See the Pen thecodelog.com - JS Prototypes 8 by Deano (@deangilewicz) on CodePen.

Delegation Theory – Objects being linked to other objects.

See the Pen thecodelog.com - JS Prototypes 9 by Deano (@deangilewicz) on CodePen.

JavaScript has retroactive inheritance. A change to a parent object updates any instances created from that object.

See the Pen thecodelog.com - JS Prototypes 10 by Deano (@deangilewicz) on CodePen.

Inspecting an object (instance) for its delegation linkage is called introspection.

See the Pen thecodelog.com - JS Prototypes 11 by Deano (@deangilewicz) on CodePen.