What is Javascript Prototypal Chain (Prototype)

Video Tutorial

Javascript Under the Hood

Javascript can be a bit confusing for developers who are familiar with the classical model where javascript is based on the prototypal model. It brings class model features in ES6 but that still just a syntactical sugar after all javascript still relies on prototypes for inheritance and constructors.

Javascript Inheritance relies on one construct available on javascript which: Objects.

Objects are the base constructor and the main parent for every javascript object, instance, function, class or anything in javascript is an Object. each object has a proto property that links to its parent prototype object and so on it goes till the end of the chain where proto points to null and that’s the base Object.

Prototypal Model is much reliable and stronger compared to the classical model where you work with classes in languages like (C++ or Java). The prototypal model can provide more functionality and control over your base objects and their instances.

Prototype Chain

The prototype chain is a pointer chain where a child object points to its parent (the object it has been created from) and so on till it reaches the end of the chain where it ends with null.

The instance object shares the same prototype as the parent object this way the base object can forward properties and methods to its children (that’s how inheritance works).

Take a look at the below diagram:

  • Foo is a Constructor Function.

  • Object is the base Javascript Object

  • b and c are instances of Foo (created by its constructor)

Each function in javascript is an Object with a special case of having a constructor that is going to be used to created instances so it has Foo.prototype which represent it prototype object this object will be used for inheritance so when you create a new instance using Foo, Foo.prototype will be forwarded to it’s instances, so b and c will have all properties and function that exists in Foo.prototype (x, calculate…).

Foo also has a proto property, this property points to the base prototype that is used to create the current Object (function). it plays the role of chain holder it maintains the chain so whenever you need to look for an inheritance to check a parent of a child instance you look under proto property.

Function.prototype is a base prototype in javascript every function has it as it’s default constructor so every function you create in javascript by default it would have Function.prototype properties and methods as a shared reference in all functions.

Function.prototype is an Object so it has a proto to link to its parent (base Object) and in this case, is the base Javascript Object.

Both c and b proto property point to Foo.prototype so c and b instances have access to all properties under Foo.prototype. The trick is if you want to add properties that get added to the inherited objects you can add them under the parent’s prototype object.

So always remember there are two types of main properties to look at under objects for knowing inheritance:

  • prototype is an Object that has base properties and function that will be forwarded to the inherited child.

  • proto links to the prototype that has been used to create the current object (plays a role of pointer that maintains the prototypal chain).

If you would like to break the prototype chain you can simply set at any point in the chain (any object) it’s proto property to null so it thinks it is the end of the chain.

No Comments Yet