Proto & Prototype in JavaScript

In JavaScript everything is derived from something. Suppose if you are creating an object a:{name:”john”} then this “a” object is derived from “Object” prototype. It means “a” will having proto of “Object“. Seems confusing? Don’t worry we are going to work with proto and prototype & make you comfortable with the understanding of both in this tutorials.

Proto object in Javascript

Let’s take one example of string & number initialisation in javascript.

var name = "john";
console.log(name.__proto__) //you will see String:{}
//it means your variable name is derived from String prototype

var data = 23432;
console.log(data.__proto__) //you will see Number:{}
//it means your variable data is derived from Number prototype

So now we have found that any variable you initialise in javascript is derived from somewhere, it means every variable will be having __proto__ object which is defining your parent. Just remember this.

Now let’s come to prototypal inheritance using __proto__.

Lets have a look at the example below:

var vehicle = {
    tyres: 4
}
//console.log(vehicle.__proto__) = Object

var car = {
    color: 'red'
}
//console.log(car.__proto__) = Object

car.__proto__ = vehicle;
console.log(car.tyres) //4
//have you seen what happened above ? 

In above example, we have just changed “car” proto to “vehicle“. Just by doing this thing, all the property of vehicle came into the car. That’s why car.tyres is giving us 4 output. This is the example for prototypal inheritance.

Prototype in Javascript

As we know from our analysis done above, every variable is derived from something & you can use __proto__ to find parent.

Same goes for functions, every function you create in javascript is having prototype property what tells from which the function is inherited/derived.

Now let’s look at the example for simple understanding.

function sendNotification(){
    //write anything or leave it blank
}
console.log(sendNotification.prototype) //Output: Constructor object
//This is giving the reference of the function that is object, which is true.

Every function in javascript is an object, so when we do sendNotification.prototype it gives constructor object reference. Don’t get confused with constructor here, every function in javascript is a constructor function. Let’s look at another example for more understanding of prototype.

function sendNotification(){
    
}
sendNotification.prototype.send = () =>{
    console.log('notification sent')
}

var notificationObject = new sendNotification();
notificationObject.send() //output: 'notification sent'

Now you know every function is having prototype property, so you can use this property to add any method to function. Property send is added to sendNotification using prototype in above example, you can create instance of this function notificationObject to call send method.

//now try this 
notificationObject.__proto__
//It will show you what notificationObject is having & parent constructor.

Prototypal inheritance using prototype property, yes you can inherit all methods of parent to child using prototype similar to proto. Let’s see how in below example.

function vehicle(){
    this.tyres = 5;
}

function car(){
}

car.prototype = new vehicle();
var carObj = new car();
carObj.tyres // output: 5

So, in this case we are just adding instance of vehicle in car prototype & all the properties of vehicle will be assigned to car.

There is more to dig into both proto & prototype, how they work behind javascript. You can try playing with them for better understanding. I will try to post another tutorial for inheritance in javascript which will make your concepts more clear.