Prototype and Prototypal Inheritance in Javascript | Frontend Interview Question

[@zahebshamsi]

First i like your video then watch it. :P

[@gunam7343]

i too

[@dominicamaljoef6693]

same here :)

[@AnkitTiwari-lu2tt]

same here

[@Ghummakad_bhaya]

Bro, my eyes are not closing after watching this 😄.Please keep on posting these deep knowledge 🙏🏼

[@abhisekpradhan9353]

same with me :)

[@shivprakashgupta2161]

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.

[@DevilGaming-bl1og]

Bro 🙏

[@Yash-y6i7k]

good

[@sohailmohammed4024]

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

[@error04354]

Hey can explain and advice what is the major and important interviewers are ask the question. What I do for interview

[@subhanginimohapatra896]

which company and for what role

[@techtube2404]

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.

[@adnanahad]

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

[@dhruvthakkar4350]

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

[@ashwanikumar183]

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.

[@canyouvish]

and now we have Namaste Javascript ♥

[@vikas.gaurav]

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

[@arghyaghosh2515]

Same bro🤣🤣🤣

[@BittuKumar_Web]

what has to do in place of, object.__proto__= object2. he suggested not to do like this. what has to do in place of this.

[@aashishomre1624]

use Object.create(object2)

[@jeet_j7]

2,3 jagah videos dekhi samajh nahi aaya bilkul bhi...yha akdam mast samajah aaya. Thank you bro❤

[@abhijeetyadav1647]

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.

[@prateekgautam7398]

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

[@NuhAleph]

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

[@anjalii1102]

inheritance in JS => When an object trying to access variables and properties of another object prototype is an Object that get attach to function/method/object and this object has some hidden properties Whenever we create object/ function/ methods/ array/ variable , these all are attached with some hidden properties, which we call prototype __proto__ is reference to prototype ( or it points towards prototype ), if we want to access prototype, we do __proto__ prototype object has a prototype of its own, and so on until an object is reached with null as its prototype, this is called prototype chaining

[@Akash_Unreal]

Thanks for summarizing buddy

[@porobertdev]

Just wanna point out that the __proto__ is an old method. There's a new method (somewhat inconvenient if you ask me): Object.getPrototypeOf(obj). Learned from TheOdinProject 🙂

[@astroflexx82]

Don't use __proto__ to access an object prototype, use Object.getPrototypeOf() instead.

[@ishratkaur1605]

is prototype an Object or a property ?

[@ranaabhijeet497]

@@ishratkaur1605 its a property by virtue of which an object is attach is to another object.

[@XYZ-bz8tf]

Yesterday I wasted my 3-4 hours on this topic with some videos on KZbin. 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.

[@adityaagrawal4466]

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

[@raviaryan6723]

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

[@bhaveshmaisuria544]

Really Deep dive coching. First time clearing concepts...Rocking.

[@countmein5164]

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

[@abhisheksoni4254]

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 ❤ ☺️

[@sindhu1345]

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

[@akshaymarch7]

Big fan of your drawings and comics. 😍

[@aparnaiyer5873]

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 !

[@dipteshmukherjee346]

guru ho aap , real guru , love the way you teach

[@mohanrawat5052]

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

[@gururajchadaga]

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

[@pranshu_g]

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

[@akshaymarch7]

Do watch Namaste Javascript web series on the channel, you'll love it brother. ❤️

[@dipinkrishnan]

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 ..

[@somewhere_in_bharat]

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

[@mdasadazam6161]

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

[@rishikeshsanjekar]

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

[@gopalbharadva1390]

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.

[@anitasunildesai]

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🙏🏼.

[@arman8k]

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

[@SachinPatel-iw5qi]

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

[@ssvideos-web]

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.

[@akshaymarch7]

❤️

[@rohitkudalkar92]

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

[@abs542]

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

[@disenchanted_dove]

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.

[@tauseefanwardo]

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

[@rishavharsh6520]

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.

[@vishwasrvishu9267]

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

[@Manish-ee8kx]

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

[@kysivaram]

The best explanation on js prototype 👌🏻👌🏻

[@RaviTeja-gq5wm]

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👌👌👌

[@swayambhagwan]

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

[@SiddhantKulshrestha]

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

[@namankeshari7332]

Your videos are actually making me understand javascript deeply!

[@oqant0424]

Liked the video ....... Got a clear understanding of the topic thanks❤❤

[@commondev2595]

Your videos are enough to crack most of the JavaScript inteviews

[@sachikanahashimoto710]

great concise nd clear explanation.Thankyou so much👍😀

[@SoorajJose1]

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

[@Aram64]

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

[@hamzahbanday8956]

this video is a life savior!

[@zarinamurattalks]

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

[@aroundtheglobeSwati]

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

[@ameyzulkanthiwar9148]

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

[@parulagg27]

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 😃🔥

[@akshaymarch7]

Do watch `Namaste JavaScript` series also, you'll love it. 🔥

[@parulagg27]

@@akshaymarch7 for sure. thanks for the suggestion 🙌🏻

[@akshaymarch7]

@@parulagg27 Here's the KZbin link for that video series - kzbin.info/www/bejne/pn-Zm55mqrqlepo

[@alpaytripleplay5150]

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

[@amitsingh-rb6jl]

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.

[@prernasingh9186]

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

[@WahabShah23]

Wow and Whao! Mic Dropped! 🎤

[@deepankarsen4511]

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

[@danielgolden90]

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

[@jayeshbagul3961]

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

[@milosleng1175]

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!

[@ashirbadbehera5544]

THE BEST EXPLANATION....

[@abrahakahsay]

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

[@saadrehman3156]

Great work buddy, much appreciated. Now my concepts are crystal clear. Thanks and love from Pakistan

[@abhishekrawat8579]

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

[@chetanmohol8850]

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

[@arpitaverma9607]

1 million subscribers soon ❤️😍

[@YashCurious]

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

[@evergreen7781]

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

[@ankitpandey349]

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😇😇😇

[@ung-k4c]

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

[@vinitrai5020]

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. :)

[@akshaymarch7]

Thanks for your suggestion, Vinit. That was not in my list, but even I think that would be helpful for a lot of people. Will surely try to cover that in upcoming videos. :)

[@shreyansh-mehta]

Really helpful, javascript students should watch this #javascript

[@guyfromdoon]

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 🤣🤣

[@divyanshu3725]

EVERYTHING IN JAVASCRIPT IS AN OBJECT and EVERYTOPIC YOU EXPLAIN BECOMES CRYSTAL CLEAR Thanks a ton for this detailed video 🙏

[@adityatiwari1937]

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

[@neomaedits]

Saini sahab Gazab explanation 💙

[@ananyajain8528]

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

[@Hosain_Ahmed]

Alhamdulillah. Family I got it, thanks a lot.

[@amiturfnd]

Mast, sab clear ho gaya. Thanks bro.

[@RejetiMeghaVardhan]

😀 You are an awesome teacher Akshay

[@touseefhaider708]

very good explanantion ..... LOVE FROM PAKISTAN

[@shresthsrivastava27]

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

[@fatimaiqra2169]

u explained very well, thanks a lot!

[@bw7891]

very good tutorial very useful. thank you Akshay.

[@chandraroy8254]

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

[@diwakaryadav4853]

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

[@mustang7ist]

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

[@GameChanger366]

Akshay just one word for u... U just awesome👍

[@TheUltimateTrainJourney]

Wonderful last 13 years working in JavaScript still was confused

[@saurabhagrawal3934]

thumbs up to the free tutorials in the world of wolf gupta

[@rajeshnarra8089]

Simple and clean. Thanks bro

[@varisumrania]

great videos with proper information. You r doing great work!! . Thanks for sharing ur knowledge nicely and clean .

[@ranjanrnj6864]

Thanks a lot Akshay, clear video of what I expected

[@mohyak76]

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

[@dequan300]

Great watch and great explanation of inheritance in js

[@dhavalmistry4860]

Awesome. Very nicely explained.