What is prototype and prototypal inheritance in js?

Hey folks, in this blog i would like to talk about prototype. we will see what is prototype in javascript and how prototypal inheritance works. we will also see what prototypal chaining is. Ok so first start with the definition.

prototype

So prototype is basically a mechanism by which javascript object inherits features from each other. These features could be anything, like properties & methods. Okay so to get better understanding lets see some examples. So here i will create an object which will have some properties and some methods.

let object1={
  firstName:"rahul",
  lastName:"singh",
  getFullName: function (){
    console.log(`${this.firstName} ${this.lastName}`);
  }
}

so generally to access the properties which we defined in object1, we use object1.name & this would give us the value "rahul". But in console if you type the object's name followed by a period into the console, like object1., then the console will pop up a list of all the properties available to this object. You'll see that as well as firstName ,lastName and getFullName(), there are lots of other properties will be present there. so you must be thinking from where did these other methods gets added to your created object?. So here the prototype comes into the picture. So whenever we create any object , javascript engine takes that created object and attaches it to some hidden properties and methods without even telling you & to get access these hidden properties you just have to do object1.proto & you will get a list of properties that can be used for ex- object1.toString() . Also notice here that this not only happens with objects , one can access these hidden properties with created functions and arrays too.

ok now lets see what is prototype chain . so the thing is that , every object in JavaScript has a built-in property, which is called its prototype. The prototype is itself an object, so the prototype will have its own prototype, making what's called a prototype chain. The chain ends when we reach a prototype that has null for its own prototype. so when you try to access a property of an object, if the property can't be found in the object itself, the prototype is searched for the property. If the property still can't be found, then the prototype's prototype is searched, and so on until either the property is found, or the end of the chain is reached, in which case undefined is returned. This is how prototype chain works.

so lets create one more object to understand this & see what is prototypal inheritance ?

let object2={
  firstName:"vikas",
}

so, lets think of a case where we want to access properties and methods of object1 into object2. To do this , you simply have to set the proto of object1 equals to object1 , like this-

object2.__proto__=object1

so , if you type in console object2.lastName , you will see that its value is "singh". Basically it will first check the property lastName in object2 & if its not there , it will go to its proto object and will give you the value. So this is how object2 inherits property of object1 & that is how prototypal inheritance works. Also not to forget that prototype is very helpful in writing polyfills.

So that's it in this blog , thankyou for reading this. 😊

connect with me here 👇👇

Github || Twitter || LinkedIn ||