Hello everyone, this is Akshay and in this video I will be covering Prototypal Inheritance. To understand Prototypal Inheritance, we will also be covering first of all, what prototype is, what is prototype chaining, what prototype chain actually is. And after understanding all those, we'll come on to Prototypal Inheritance. So Prototypal Inheritance is itself a very core concept of JavaScript. And it is needless to say that it is a very important interview question.
And a lot of companies are asking this question, just because the whole concept of Inheritance's JavaScript is based on Prototypal Inheritance. inheritance and what prototype is and how everything works behind the scene in JavaScript so this will this video is definitely going to be an eye-opener for you and a lot of new things will be covered in this video so keep watching so before starting to explain what what all these things are I wanted to tell you that inheritance as a concept in JavaScript is totally different than other languages or if you try to compare protribal inheritance with classical inheritance then it won't make sense. Classical inheritance and inheritance in other languages are is a completely different topic and this is completely different. So don't use your knowledge of other other other languages inheritance into this because it will definitely mess up.
It is very simple. It is very easy to understand. Just just know that inheritance is like one object trying to access methods and properties of other object.
It is that simple, that easy. Let's see how we can do it and let's see with the examples how we can demonstrate all these things. So on internet you will find all sort of examples of prototypal inheritance explained with cars, trains, buses and animals and whatnot but over here I'll be taking just simple objects and explaining you in a very easy way. So I'm not using those random examples just simple plain JavaScript. Let's see the demo and you'll definitely learn a lot.
Thank you. To understand this, let's create an array that's ARR and let's put some value in it. Akshay and let's say it's Aditya. Okay, so I have created this array.
So have you ever wondered when we check ARR and then put a dot then we get access to all these methods and properties. So how does this array getting access to all these Built-in functions, methods, properties, we didn't define it, right? So we didn't write any implementation for array.push or anything else. We didn't do that. But how is this arr getting access to this?
So and not just arr, array, but suppose if we had an object, let's create an object. It has some properties, suppose name. and a city let's call it as there are do and suppose we also had a method which is get intro which is a function So generally when you see we want to if you want to access this property name on that object so we do object.name and we get access to this property but how is this object getting access to other properties and methods as well just like to string function how is it getting access to this so there is something known as prototype so here is it prototypes come into picture so whenever You create a JavaScript object JavaScript engine automatically without even letting you know attaches your object with some hidden properties and functions and these are these are the hidden properties and functions which you can access it by just doing object dot and we can do a lot of things and it's not just with the case of objects. If you create a function also suppose we create a function.
which does nothing for now and if we check it so even this functions get access to a lot of other things just like call apply and bind and a lot of other functions so and functions are also somewhat objects right so whenever you create anything in javascript even a variable they get access to some of the hidden properties and methods so these come via prototype so let us understand what this prototype is So whenever you create any object, javascript engine automatically puts this hidden properties into an object and attaches it to your object. So I repeat it attaches an object to your original object and that is how you get access to those properties and methods. So, let's see how we can access that. So if you want to access that hidden object, we can do it by writing something known as arr underscore underscore proto. And this is the object where JavaScript engine is putting all these functions and methods.
So see arr dot underscore underscore proto. And if we do a dot over here, we get access to everything. So, this is how you can get access to foreach, includes or any other methods which are present. So, it's not just in the case of array.
If you do it for object, then you get access to this object as well which is the prototype object. So, it also has some methods and properties. And same is the case with function when you do fun dot. So this is what prototype is.
It is as simple as that. Just keep in your mind that it is just an object which is attached to each and every method object. or an array or a function whatever you create in JavaScript object is attached to it and that object has these properties which gets access which you can access directly by using a dot operator you don't so just how we do object dot name to get the name that is how we can do object dot to string to get a to string of that object so it is that simple So let's see what arr.__proto is. So arr.__proto is this object and it is same as array.prototype.
See these two values are same. And when I say that even the __proto is an object. And each and every object in JavaScript has a prototype.
That means even this arr.__proto has its own prototype. What does that mean? I mean arr.__proto also has a prototype. So let's see what it is. So when we do this, we get this object.
Now what this is? So this is actually the object.prototype. And when I say this is also an object, so that means arr.__proto and the prototype of this and the prototype of this again. What it is? It is actually null.
So if you see, it is sort of a chain. So the arr prototype is the array.prototype. And the prototype of this array.prototype is the object prototype. And the object's prototype is actually null.
So that is what you call it as a prototype chain. So this is the whole chain whenever we create an array it has its prototype which is array.prototype and the array.prototype object also has a prototype which is object.prototype and then object.prototype's prototype is actually null. That is the end of the chain. So if we see in case of object object.__proto is nothing but object.prototype and object.proto.__proto.__proto is what?
Can you guess? What is the prototype of object.prototype? Yes, it is null. In case of functions, let's check in case of functions as well.
functions.__proto is nothing but function.prototype and have you ever wondered what the prototype of this looks like? it is again an object which is equivalent to object.prototype so can you figure out something in your mind? So have you heard of that statement that everything in a JavaScript is nothing but an object.
So I think that has come from here only. So whether you make an array, whether you make an object, whether you make a function. It is actually down the prototype chain ends up being an object. So if you create function, it has the prototype of function.prototype.
And the function.prototype.prototype is again an object. So that is what the whole prototype chain is. This is known as the prototype chain and it ends up being at null.
So it is that simple. Nothing else to worry about. And to understand it better, let's...
Let's take an example. So let me clear this function and an array and let me keep this object and create another object to play with. So let me create an object object to and which has a name property again. Let's call it other there and this is what our object to is object to is. So what I am trying to do right now, you should never do it in your real life coding.
So I am trying to directly modify my object to prototype. That means underscore underscore proto. This is not advisable.
You should never do it. It causes a huge performance issue. So you should never do it.
Let me write it down in comments. Never do this. It is just for demonstration purpose in this example so that you can understand it better but you should never write your code in this. If you want to modify prototype there are different other ways to set the prototype but right now what I am doing is not the best way for sure. So if we had this so before modifying this actually so let me comment it down for a while and let me check first of all what object to dot prototype object.
to.__proto is actually. So can you guess what it is? Okay let me refresh the page. It is the object.prototype.
This object.prototype. It is pointing to this object. So what if I actually point this proto to object instead.
So what happens now? So, what happens is now by setting this object to object2.prototype, let's check it once. Yes, see now object2.__proto is pointing to this object what we created, this one. It's same.
So, by this, we can access the properties and method of this object inside object2. So how? So remember, just like we were able to access arr,.push and everything which was inside __proto by using a.operator In same way we can also access object's property inside object2 So let me show you how So suppose if I do object2.name What happens is, it goes to object2 and checks this name property and returns us But what if I do But what if I do something like object2.city. Can you guess what it is? Yes it's dairadhun.
So do you wonder how is it coming? Just because it is sitting inside its proto. So this object2's proto, if we see.
it has the city property so how it works so what happens is when you try to access any property suppose we try to access city inside object 2 so first of all it will check on to the top of the main object so just in this case it was checking the dot city inside object 2 if it doesn't find it it goes to the proto if it doesn't find inside that proto itself it will go to the proto proto of the proto and that's how it goes throughout this chain so this is whole prototype chain and that's how JavaScript engine processes this properties so this is how object to inherits from object so that is what prototypal inheritance is Object2 is inheriting properties of object. When we did object2.city, it is checking inside object2. If it is not present, it is inheriting from the object, its parent which is city. So, just because it is set inside its __proto property. So when we access, so like how we access city, can we access the.get intro as well.
Let us check what this prints. What does it prints? It prints akshay from deraDun just because it has access to this get intro method. But what if I did object2.getintro?
Will it inherit or can you guess what the output will be when I do object2.getintro? Can you guess? Waiting for a while and check what this answer will be. Yes, you are right.
It will be Aditya from Dehradun. So what happens in this case? So whenever you call object2.getIntro, now this inside this getIntro method is pointing to the object2.
So it tried to lock this.name. So it tried to access the name property inside the object2.object. So, it finds the name property and returns the name property and prints it and when it doesn't find the city property inside this object2 it goes to the prototype chain and according to the prototype chain it finds it inside object so it prints Dehradun.
So that's how it was that's what it is and that simple it is. This is what a prototypal inheritance is where object2 is inheriting properties and methods. from the proto which is pointing to this object. So let me tell you one more super fun thing. So let me for that let me clear everything over here.
If you have seen my video of the polyfill for bind method, I did something like function.prototype.mybind if you can relate it, I did something like that and I created a function like this. So this was to implement my bind and I kept it inside function.prototype. Why did I do that?
So for now I am not implementing this fully just I am trying to log something inside this some random things. So what does that mean and why I did that. So just because now I think you must you must be able to guess it. So if we had some function fun.
So if we try to check fund.proto now we will be able to access this mybind method as well. See we got access to this mybind method. So each and every function what you create will now get access to mybind method just because we have set this. my bind onto function dot prototype setting this my bind onto the prototype of function will give all the functions access to my this my bind method so whether it is fun or we have a new function fun to each and every method now can access this my bind method it's it's that easy that simple so if you have not checked my bind video then you can definitely check it it was an awesome video and it's a very super important interview question and it is asked by a lot of big companies. So you can go ahead and check out that.
So that's all in this demonstration. Thank you. So have you ever wondered why we use underscore underscore proto underscore underscore to get access to prototype? Why not anything else?
Why not just prototype? It is just because so that so that you don't end up messing up the prototype by mistake. So and definitely nobody is going to write underscore underscore proto by mistake right. So that's why they chose that term underscore underscore proto. And there are a lot of other properties you will see by underscore underscore.
And that's what the naming convention was. Nothing so exciting about it. But yeah it's that. So that's all in this video for prototypal inheritance.
But I would suggest you to go back to my YouTube channel. Check out other tutorials as well. That will give you a better idea of what is being asked in interviews and how and that will definitely help you to crack all the interviews. I've also started sharing my interview experiences with Microsoft Grab and I am coming up with more such videos so that you get a better clear idea about what is what these big companies are asking and expecting in terms of the candidates and in terms of skills, what you require. So that was it and then if you liked the video then definitely give it a like.
a thumbs up and stay subscribed to my channel and also press the bell icon so that you get notified of all the upcoming videos. These are very important videos. Don't miss any of them and this will definitely help you craft interviews. And if you have any suggestions in mind or you want me to ask any specific question or you want me to cover any specific interview topic, then do write it down in the comment below or just go to my LinkedIn profile. Stay connected to me on LinkedIn.
LinkedIn is a very powerful platform and that will definitely help you. definitely help you so that's all in this video and thanks for watching Thanks for watching!