Prototype and Prototypal Inheritance in Javascript | Frontend Interview Question 

First i like your video then watch it. :P

Things Learned (from different resources): --> What is Inheritance of an Object in Javascript? When a new object is trying to access properties and methods of another old object, because this new object might be created from the old objects reference. Example : object1 = { city:'mumbai' }; object2 = Object.create(object1); object2.name = 'Shiv'; console.log(object2.name + 'is from' + object2.city); // here when one couldn't find city property inside object2, it goes to find this property in the inherited object1. This is called inheritance of an object in javscript. This type of inheritance is different from the classical inheitance of oops. This type of inheritance is provided by Prototype Inheritance. --> What is prototype in javascript? Statement - 'Almost everything in javascript is a object' Prototype is nothing but an object which consists of builtin properties and methods. In JavaScript, there are different types of prototypes depending on how the object is created: Object Literals and new Object(): The prototype of objects created with {} syntax or new Object() is Object.prototype. Array Literals and new Array(): The prototype of arrays created with [] syntax or new Array() is Array.prototype. Date and RegExp: The prototype of objects created with new Date() and new RegExp() are Date.prototype and RegExp.prototype respectively. In JavaScript, every function has a prototype property that refers to an object known as Function.prototype Whenever we create object/ function/ methods/ array/ variable , these all are attached with some hidden properties, which we call prototype. if you want to know what hidden properties and methods are stored in a prototype object? Array.prototype Function.prototype Object.prototype what if I want to know the hidden properties of a object declared in the code? _proto_ is reference to prototype ( or it points towards prototype ), if we want to access prototype, we do _proto_ example: let a = {}; a.__proto__; What is difference between [[Prototype]] and __proto__ and prototype? Ans : All are objects. I]///////////////////////////////////////////////////////////////////////////////////////////////////////////// [[Prototype]] is a hidden private property that all objects have in Javascript, it holds a reference to the object’s prototype ([[Prototype]] : Object.prototype). An object’s prototype is the object that an object inherits or descends from. --> Means that if an object2 is inherting properties from another object1, then inside the object2's prototype we'll find the methods and properties of object1. so lets say we have two objects --> object1 and object2. null-->Object.prototype Object.prototype-->object1 object1-->object2 null-->Object.prototype-->object1-->object2 since all objects in javascript point to the default Object.prototype, the Object.prototype points to null. To verify if its point to null or not see inside Object.prototype.__proto__ === null II]/////////////////////////////////////////////////////////////////////////////////////////////////////////// __proto__ (also called the Dunder Proto or Double Underscore Prototype) is a property of Object.prototype that exposes the hidden [[Prototype]] property of an object and allows you to access or modify it. You should not use it as it is deprecated, although you may come across it in older code. The modern way of accessing an object’s prototype is by using Object.getPrototypeOf(obj). You can also modify an object’s prototype using Object.setPrototypeOf(obj, prototype) as you can see in the following. III]////////////////////////////////////////////////////////////////////////////////////////////////////////// .prototype is a special property that almost all functions have that is only used when a function is invoked as a constructor function. I say almost all because arrow functions and methods defined using the concise syntax do not have .prototype properties and cannot be used as constructors. The .prototype property contains a reference to an object and when a constructor is used to instantiate or create a new object, .prototype is set as the prototype of the new object. CONCLUSION : .prototype is a special property that all functions have that contains a reference to an object. When a constructor is used to instantiate a new object, ConstructorName.prototype is set as the prototype of the new object. All instances of that constructor (the objects it creates) can access the properties of ConstructorName.prototype. Q1 > What will happen if we use x.__proto__ and x.prototype, here x is a object declared using object literals? x.__proto__ // this gives a object which containes hidden methods and properties defined for the prototype of varibale x, here variable x is an object, so it inherits the properties and methods of Object prototype. x.prototype // since x is a object decalred using a object literals, this gives a undefined. Q2 > What will happen if we use myfunc.__proto__ and myfunc.prototype, myfunc is a construction function? myfunc.__proto__ // this gives a object which containes two things --> custom made hidden methods and properties defined by the user + default hidden methods and properties of Function prototype; here myfunc is a function, so it inherits the properties and methods of Function prototype. myfunc.prototype // this gives the default hidden methods and properties of Function prototype; here myfunc is a function, so it inherits the properties and methods of Function prototype. Q3> What will happen if we use y.__proto__ and y.prototype, y is a object declared using new keyord on construction function myfunc? let y = new myfunc(); y.__proto__ // this gives a refernce to the object which containes hidden methods and properties of the function myfunc, since y is an object which inherits from the myfunc.prototype, also it inherits the properties and methods of Object prototype. y.prototype // since y is a object, this gives a undefined. --> What is prototype chain and prototype inheritence in javascript? So basically a datatype/dataStructure in javascript has a prototype which refernces/points to a object(prototype), and this object(prototype) references/points again to another object(prototype), at some point this referencing ends and the object finally points to null. So when does it end? It ends when the last reference is to the Object.prototype, and this object.prototype points to null. So every prototype in javscript eventually points finally to the Object.prototype , This is called Prototype chaining, and using this chaining method we can create a custom prototype inheritance between functions.

awesome explanation. First, I used to read on MDN then refer to any video/blogs/articles for a simpler and short explanation. Now firstly I'll watch your video then refer any other study material. Please never stop making such great videos.

I was quite confused by this topic for a long time, you make it simple and great explanation. I would genuinely request you to create the JavaScript Series for all the possible topics.

Interviewer asked me same question I explained it beautifully and he was surprised on my explanation and I got selected in interview too Thanks to Akshay brother for giving super content

I read it many times from MDN but never understood it completely, now it is done😍

Honestly, Your last mybind example made me understand even more better. That was good. Keep up the good work sir.

If not the best content out there on prototypal inheritance, it surely bridged the knowledge gap between __proto__ and prototype. Thanks Akshay for the video. keep up the good work. Quick tip: __proto__ is on the object instance, prototype is on the constructor function.

Extremely well explained. I watched from udemy paid course but couldn't understand. but this person explained me perfectly.

I am a Namste React subscriber and have completed the complete JS tutorials and I did not find this video over there , in the interview, protypal inheritancewas asked and I could not answer is correctly, so please add this video in the Namste JS section please, so that other will not face this issue.

Aap hi ho jo itna deep padhata h aur itne ache se padhata h... Aur sab kuch smj aata h... Practice karne mai b maza aata hai really thankful to you... I love u sir...please make more videos in namaste javascript

first time i watched your video and understand what really is a prototype. Thanks for the wonderful explanation in the coding way.

you know what's more beautiful than functions in javascript, it's your teaching style ❤

This channel's content gives me so much confidence. Thank you so much.

Yesterday I wasted my 3-4 hours on this topic with some videos on RU-vid. However, I did not fully understand the subject, there was always a missing piece. I could implement but this was just usage without understanding fully. Now, in 20 minutes, the subject has become completely clear in my head without any doubt. There is a serious amount of information pollution on the Internet. You really did a great job Akshay. I will be watching all your javascript-related videos for the next 2-3 days. Thank you so much for good and precise information.

I found my javascript tutor. Thank you, god bless you.

Can't believe I finally understand this dunderproto thing 💯🔥.. I actually liked your video in between & then continued watching.

the most beautiful and well organized videos that i have ever encountered to youtube. THanks myan! looking forward when the new videos are coming

i feel lucky to found your channel. Love ❤️ and Support.

Awesome video Akshay! Just a side note that strings,arrays all get coerced​ into its object equivalent called as wrapper object when we try to access the built in properties. This is the reason why we use the dot(.) Operator to access them.

No wonder why Akshay is the best when it comes to JavaScript, I have just watched half of the video, and today my this query "€verything in JS is an object" is resolved. Today I got the real answer. Thank you, Akshay ❤ ☺️

Very helpful. Easily understood otherwise a highly confusing topic. Keep up the good work.

WONDERFULLY EXPLAINED ! IT IS RIGHTLY SAID THAT IF YOU CAN NOT EXPLAIN IT SIMPLY ENOUGH THEN YOU DO NOT UNDERSTAND IT... THANK YOU VERY MUCH !

Possibly the best explanation so far. Simple and easy to understand, great job man!!

I've watched many JS tutorial on RU-vid but your explanation is totally different You are JavaScript King 👑

Idk wtf I was doing 3 yrs ago but here I am. Learning js from gold contents. Thanks for Namaste JavaScript episodes🎉

Subscribed. Finally found someone who is teaching in a way I want to be taught or I teach someone. Thanks, dude!!

Akshay your explanation is 1 number, I watched your video of poly fill for bind but don't understand the Function.prototype but now I got it. Thanks akshay bhai.

Such complex concepts taught so beautifully with so much passion. Iam blessed to be your student watching and learning from your videos. No words to thank enough🙏🏼.

Best explanation i've ever found out on prototype chaining..

Hey Akshay, wonderful lesson. Thanks a lot for making it so simple.Your videos make JS easy and hence more interesting,as they say ''once you understand you get interested" .I would appreciate if you could come up with a video on DOM Manipulation without using Jquery. I know there are many resources available for this on the web but a video from your end will definitely clear the things in a much much better way.Hope to get a solid foundation video on DOM maipulation with Vanilla Javascript. Thanks in advance. :)

The most important thing I like in your videos …. You always have that confidence on :-)

the solution of JS problems = Akshay Saini🙏🙏

good videos bro. I have watched tons of Videos on YT on the topics you presented, but sometimes things do not click on the first time, etc, so I keep coming back to the concepts that cause me issues. I love simplicity of your channel, you really helped me clear some things up! cheers!

Thank you for explaining in a practical way. It is very helpful.

Usual prototype expiation begin with car colour seat etc 🤦🏻‍♂️ and I forget every time ... Most simplest way to explain prototype and js inheritance. Love the way you detail things ..

Concepts clear within just 20 minutes, in which i was struggling for days. Thanks vaiya. Love from Bangladesh.

Much better explanations than all the videos I have watched till now on this topic, liked the video as soon as I got what you were explaining. Now subscribing to your channel for the depth of knowledge you are trying to provide thanks a lot it helped a lot.

I was lost and here you are man! Lovely, marvelous, mind boggling, seriously man, you make javascript fun to learn.

Wanted to know what is prototype in JS... searched on youtube and here comes this first video in search, and no need to open other tabs from results... Guaranteed that everything will be covered here. Thank you 🙏🏼 for such great videos.

very clear explanation i watched many videos but this video is very understandable.

awesome video... cleared all my doubts without having to watch 100s of videos

The best explanation on js prototype 👌🏻👌🏻

Probably the best explanation so far. I had multiple confusions around this topic previously, but they all got cleared through this. Thank you for making this video 😃🔥

finally an explanation that does not use animal/user constructor functions for examples. using arrays/objects for examples finally helped this topic click better for me

Your videos are actually making me understand javascript deeply!

Came to this after being asked what is prototypical inheritance in JS during an interview and not REALLY knowing. Thanks!

Your videos are enough to crack most of the JavaScript inteviews

Your explanation is just awsm.....Thankyou...

Thank you Akshay! Your videos are helping me to understand things that I could not understand!

Thank you so much for indepth explanation.

You are the best javascript tutor, i am watching all your videos. Great comtent, very helpful 😁

Finally, all doubts are cleared🔥🔥. Thank you so much sir for such amazing content. Please post more knowledgeable videos like this. BTW i m from Dehradun 🤣🤣

i like ur video and ur javascript knowledge is great ...please make more video on javascript.....there are less video on javascript....my concept on prototype inheritance is clear by watching your video

Object in JS be like : Aham brahmasmi 😌

great concise nd clear explanation.Thankyou so much👍😀

This is Gold! for a Javascript beginner! (at least for mine)....

Akshay bhai aapka samjhane ka tarika bohot gazab hain, thanks... : )

Thank you Bhaiya for explaining those terms beautifully, I'm glad that you made the video on it.

Namaste JS has brought me here! :) Very informative video.. :)

u explained very well, thanks a lot!

I am new on your channel and js too, but you are not disappointed me, thank you

1 million subscribers soon ❤️😍

Thank you for putting me in the example.... :)

Finally i got what is Prototype and Prototypal Inheritance, thanks bro

Wonderful last 13 years working in JavaScript still was confused

THE BEST EXPLANATION....

You make things so simple. I would love to join Uber, because Akshay is there ❤️

Bravo. Great, simple, and clear explanation. Thank you.

By far, the best explanation of prototype and __proto__. Thanks.

Bhaisaab , I was so confused in this topic ... Akshay bhai ...Dil se shukriya ..❤

very good tutorial very useful. thank you Akshay.

You are really good in JavaScript.. thanks for this video

Q. What is Prototype? A. By prototype we can get some hidden property or method . If we are creating some Array, function , Object. For Ex- let obj2 = { name: "Aman", age: 21 } In this if we are going to obj2 methods in console so we can get different methods becz of prototype. Q. What is Prototypal Inheritance? A. Prototypal inheritance is that you can add new properties to prototypes after they are created. For Ex- let obj1 = { name: "Aman", city: "Pune" }; let obj2 = { name: "Alex", }; obj2_proto_ = obj1; console.log(obj2.name+" "+obj2.city); // Alex Pune

Akshay Explanation is like: So Beautiful, So Elegant Looking Like a Wow. Really great explanation Akshay, its that simple. You have best teaching skills... Super👌👌👌

WOW ! :-D it's indeed an awesome explanation, got this concept cleared, thanks a lot bro :-)

Paused midway just to comment - this is by far the most penetrable vdo on prototype

Thank you Akshay for all the wonderful and easy explaination. I always watch your videos before the interviews. ♥️

Mast, sab clear ho gaya. Thanks bro.

this is the best explanation for me ever. keep up the good work. please do a video about this keyword. thank you

Wow, your break things down so very well. Thank you for this!!

Akshay... I really want to understand why should we modify __proto__ as shown in the video? And what are the valid (or legal) ways to modify __proto__?

simple and to the point, thank you :)

thanks alot sir.... i've learned alot from these kind of videos

Great...Thank you...got my concept clear

Really helpful, javascript students should watch this #javascript

Liked and subscribed! Now, you are on my list for more references. Thanks, man.

Very helpful thanks for sharing your knowledge.

hatss off to u bro, u make hard concpet so easy to understand, u also made ur map reduce and filter video so much simple and elegant, keep posting more such😇😇😇

very clear explanation thank you

ur javascript expert sir

Thank You so much, I surfed many other videos on same topic. But this one is the best, clears the whole concept. Subscribed the channel. Thank You.

We want more videos on JavaScript

Thank you dear Friend! super now i cleared with prototype. Can you suggest how to improve logic skills for who coming from designing background people? its most helpful to others.

You are great bro! Watching from myanmar

Great watch and great explanation of inheritance in js

Simple and clean. Thanks bro

Thanks a lot Akshay, clear video of what I expected

That's a great explanation Akshay

Feels like both of us studied from ‘understanding weird part of JavaScript’ course