Prototypes in JavaScript are Not as Cool as The Ones You See in Auto Expo!

A lucid explanation on prototypes along with prototype chain in JavaScript.

Fennec Fox populations appear to be at risk. They are not only suffering from habitat loss, but they are often hunted throughout the Sahara, making them rare in parts of Northwestern Africa.

“Prototypes” have proven to be one of the most confusing concepts of JavaScript. There has been chaos for quite a long time among learners that resulted in either hating the concept of “prototype” or skipping the entire concept and directly switching on to another one. So, as a mitigating therapy, I’ll try to explain this concept in an uncomplicated way.

Firstly, what is prototype?

Prototype is a mechanism in JavaScript, with the help of which objects inherit the properties of it’s parents. The main point to remember is that prototype is only valid for functions and objects. And every function includes prototype object by default.

What properties does the prototype object include?

• Constructor — The function which is used to create the instance.
• __proto__ — It links to the prototype object of the function.

Example

function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}
var person1 = new Person("Kapil", 23, "Male");

In the above example, I defined a constructor function with properties namely: name, age, and gender. Hence, I created an instance namely: “person_1”. Now, if you type “person_1” on your console, you’ll see that it consists of the entire instance along with “__proto__”. This “__ptoto__” is linked to the constructor function. Along with the constructor function, you’ll see another “__proto__”, and this “__proto__” is further linked to the “prototype object”.

Graphical illustration of the above code snippet

Prototype chain for the above code snippet

Most significant points

• Properties of the object which are not meant to be shared are written in the constructor function only. Also, you can attach new properties to an object at any time.
• If you want to add new properties at later stage to a function which is meant to be shared across all the instances, then you can use “prototype”.

Example

Person.prototype.bio = function(){
  console.log(this.name, this.age, this.gender);
}

In the above example, I created a function, which is meant to be shared across all the instances. Therefore, I used “prototype” to implement it.

Prototype chain

Prototype chain can simply be understood as a look-up behavior of the JavaScript engine to find the existence of a particular property of an object. Suppose you call an object’s property. The JavaScript engine will first check the object itself for the existence of that property. If not found, it’ll go to the object’s prototype object and check that object. If found, it’ll use that property. If it is not found in that object, then it will lookup on that prototype object’s prototype object, If found there, it’ll use that property or else lookup continues until it finds an object with a “__proto__” property equal to “null”. This is known as “prototype chain”.

Summary

In this article, I have briefed you about the basics of prototype and prototype chain. Along with the concepts, I have also included code snippets for examples mentioned above.