Prototype Chain

In this article, we will talk about prototype chain. Let’s start with what is a prototype? A prototype is from where objects inherit properties and methods.

You might be asking why is a prototype important?

• Prototypes are a convenient way to define properties that will be accessible to other objects.

• Allows to easily define methods for instances of an object; they get stored in memory once but every instance can access it.

• They are used to create object-oriented code.

Every object can have a prototype, and an object’s prototype can have another prototype, and that object’s prototype can have another one...and so forth. This “queue” is referred to as a prototype chain. Let’s look at some code…

First, we define a Tree function, that creates an instance variable that holds ‘pollination’ (a boolean value) initialized to true. We later invoke the Tree function as a constructor, triggering the creation of a newly allocated object called orangeTree.

Important: Every function gets a prototype object every time it is created. In this case we used a function as a constructor so the constructed object’s prototype (orangeTree) is set to the function’s prototype (Tree). Take a look at the following:

We use the property __proto__ to see how the prototype chain looks.

You will notice that when accessing orangeTree.__proto__ we see a list of methods that are available in the object’s constructor’s prototype Object (i.e hasOwnProperty, isPrototypeOf, toString, etc). These methods in orangeTree are inherited from the Tree() prototype that inherited from the Object prototype. That is our prototype chain.

Now let’s add a method to our Tree prototype, like this:

We add the fertilization method to the Tree prototype using the following syntax: Object.prototype.methodName.

Since the change made to the Tree prototype was after the instance orangeTree was created, the fertilization method becomes accessible to orangeTree (because it references the Tree prototype). 

What happens when we override our prototype and replace it with something else?

In this code, we override the Tree function’s prototype by assigning a new object that has a harvest method by using Object.prototype syntax.

Important: Notice that the reference between an object and the function’s prototype is settled at the time the object is instantiated.

If we console.log(appleTree) we’ll see under __proto__  that the new object (appleTree) has a reference to the newly created prototype and has access to the harvest method, but not to the fertilization method (old prototype). However, orangeTree (prototype before the change) object keeps the original prototype fertilization. 

In summary, prototypes are a convenient way to define properties and functionality that will be easily accessible to other objects. Their main use is to produce an object-oriented code. Each prototype has a private property that holds the chain/link to another object, thus creating a prototype chain.