Prototypes & Prototypal Inheritance Explained - Javascript Interview

[0:00]Hey guys, welcome back to another exciting video and is video ke andar hum baat karne wale hain JS inheritance ki. Is video mein hum dekhenge that inheritance kaise kaam karti hai JavaScript ke andar and ye prototype kya cheez hai. Because this prototype and prototype inheritance ek aisi cheez hai jo JavaScript interviews ke andar bahut zyada puchi jaati hai. So this is very important to understand. So with that, let's start with the video. So let me show you ek bahut hi simple si cheez okay, ek bahut hi simple si cheez. Ek statement aapne bahut zyada suni hogi that in JavaScript everything is an object. Ye aapne bahut suna hoga that in JavaScript everything is an object. So aaj aap samjhoge that aisa kyu kaha jata hai. JavaScript ke andar har cheez object kyu hai, right? Toh usse pehle na shuru se shuru karte hain. Let's say that mere paas na ek bahut hi simple sa ek object hai P1, right? Mere paas ek bahut hi simple sa object hai P1, jiske andar we have an F name let's say Piyush and uh Piyush, agar main khud ki spellings theek likh sakta hoon, and mere paas ek yahan par hai L name that is Garg. Bahut hi simple sa object. And agar hum is object ko console.log kar lete hain. So console.log P1. So you can see that mere paas yahan par aa raha hai F name as Piyush and L name mere paas kya aa raha hai Garg. Similarly, agar hum yahan pe dot likhte hain, yahan pe agar main dot karta hoon, toh you can see I can access the F name and main yahan par kya access kar sakta hoon, main yahan pe L name ko bhi access kar sakta hoon, right? So ideally yahan par kya hua, ideally yahan par kya hua, main yahan pe P1.L name and P1, jo bhi iski properties hain, main usko access kar pa raha tha, right? Now, let me show you one very interesting thing that mere paas let's say yahan par ek function bhi hai that is getFullName. Okay, getFullName. Toh ye getFullName function kya karta hai? This basically returns uh hum isme ek string literal return kar sakte hain that this.F name and uske sath hum concatenate kar denge this.L name ko. So ab mere paas yahan par interestingly kya hai, mere paas yahan par interestingly ek function bhi hai that is getFullName and agar main isko dot.getFullName function ko call karta hoon, you can see I'm getting Piyush Garg. Everything is working super duper cool. Now, let's say that mere ko yahan par ek aur function banana hai P2, okay, sorry not function, mere ko yahan par ek aur object banana hai P2. Jiske andar I should ideally have this F name and L name and mere ko iske andar bhi I need this function, toh mere ko isko copy karna padega. There is no inheritance, right? Main isko inherit nahi kar sakta. So mujhe kya karna padega, mujhe is tarah se sara code copy karna padega and uske baad I can update the values, okay. Ab dekho, values ko update karna toh meri marzi hai, right? I want this. Lekin agar aap dekhoge that ye particular piece of code jo ye function maine yahan par banaya hai and jo function hamare paas yahan par hai, exactly same hai. Toh yahan par main kya kar raha hoon, main basically DRY principle ko violate kar raha hoon, do not repeat yourself. Main yahan par code ko repeat kar raha hoon. Iska disadvantage kya hai ki agar yahan par koi bug hoga, toh woh bug yahan par bhi aayega. Is there a way ki main is P1 object ko inherit kar paun P2 ke andar? Is there a way ki main is object ko inherit kar paun? Toh ek tarika wahan par hota hai. Toh yahan par hum kya kar sakte hain, instead of doing this na, main yahan par use kar sakta hoon Object.create. Theek hai, toh main abhi samjhaunga ye Object.create kya karta hai and main yahan par pass kar dunga P1. So ideally ab main yahan par kya kar raha hoon, main yahan par ek new object bana raha hoon P2, which is inherited, which is used making P1. So ab agar main yahan par P1 ko console.log karta hoon, you can see that P1 ke andar koi bhi change nahi hai, right? P1 looks something like this. Lekin, lekin interestingly agar main yahan par P2 ko console.log karta hoon, so P2 mere paas yahan par ek empty object aa raha hai. Agar aap yahan par dekhoge, theek hai, main yahan pe aur clarity ke liye main yahan pe likhta hoon that P2 is, theek hai, and hum yahan pe likhte hain P1 is. So P1 is this, P2 is this. So agar aap dekhoge, P1 kya aa raha hai, P1 basically ek object aa raha hai, which you can see F name hai, L name hai and hamare paas function hai, lekin P2 ek empty object aa raha hai. So you might be wondering that P2 yahan par ek khali object bana, P1 actually mein inherit hua hi nahi. True. I mean, you can say that. But agar aap yahan pe interestingly P2 ke upar dot karoge, so I can call the F name. Try karte hain. Kya main F name ko call kar pa raha hoon? Bilkul kar pa raha hoon. P2 ke upar F name Piyush aa raha hai. P2 ke upar kya main yahan par getFullName ko call kar sakta hoon? Bilkul kar pa raha hoon. Kya main yahan par P2 ke upar L name ko call kar sakta hoon? Uh sorry not L name, L name. Kya main yahan pe L name ko call kar pa raha hoon? Bilkul kar pa raha hoon. So P2 ke andar, toh Piyush, koi keys hai hi nahi. P2 ke andar toh you can see that there are no keys in P2. Lekin, somehow, right? Somehow main in properties ko yahan par access kar pa raha hoon kaise? So baat karte hain that jab bhi aap yahan par kisi bhi properties ko access karte ho, toh woh kis tarah se JavaScript ke andar flow karti hai. Toh us cheez ke liye hume yahan par ek concept ko samajhna hoga that is known as prototype. Okay, prototype. So kya hota hai prototype? Usko samajhte hain. Theek hai? Let's say aapke paas na ek base class hai, theek hai? Aapke paas kya hai, ek base object hai ya fir aapke paas ek base class hai. So let's say yahan par mere paas jo P1 hai, woh mera kya hai, ek base object hai, jiske andar you have F name, theek hai? Jiske andar you have F name as Piyush and jiske andar let's say aapke paas ek L name hai that is Garg, theek hai? Jab bhi aap JavaScript mein objects ki baat karte ho na, aapke paas na ek bahut hi special cheez hoti hai which is known as prototype. Iske andar you have something known as underscore underscore proto underscore underscore which is again an object. Theek hai? Ye underscore underscore proto kya karta hai? Let me show you that. Agar aap P1 ke andar kisi bhi property ko access karne ka try karte ho toh hota kya hai, okay property likhte hain yahan pe property. So kya hota hai? Jab aap P1.property likhte ho, toh pehle kya karti hai JavaScript, jo ye property hai na, usko woh search karti hai is P1 ke khud ke object ke andar, ki let's say if you are trying to access F name. Toh woh P1 ke andar F name ko try karegi access karne ka and kya usko F name mila? Bilkul mila, toh woh uski value yahan pe return kar degi. Toh jo bhi property hum yahan pe try karte hain access karne ko, usko hum pehle P1 ke andar search karte hain. Agar usko is level mein nahi milti property, toh JavaScript kya karti hai, usko underscore underscore proto underscore underscore object mein search karti hai. Theek hai? Ye kahan se aata hai? I'll tell you. Toh ye property kahan search hoti hai, underscore underscore proto ke andar search hoti hai. Agar usko underscore underscore proto ke andar mil jati hai, that's cool, agar nahi milti, that is where you can get an error ki ye particular property exist nahi karti. This is fine? So tell me one thing, agar main P1 ke upar .F name ko search karunga, .F name ko search karunga, toh I am getting Piyush. Matlab ki woh kya kar raha hai? Ki bhai P1 object ke andar jao which is this one and iske andar se F name ko read kar lo. Lekin P2 ke andar agar aap dekhoge, P2 ke andar khud ki property toh hai hi nahi.

[7:18]Toh is statement ne pata hai kya kiya? Is statement ne pata hai kya kiya? Is statement ne aapke liye ek naya object banaya, jiske andar underscore underscore proto ki value usne P1 kar di. Toh you can see abhi bhi ye bilkul sahi kaam kar raha hai. Abhi is I can do this, right? So you can see. Toh prototypal inheritance kya hoti hai? Toh thoda thoda aapko idea laga hoga ki kuch underscore underscore proto hota hai.

[7:43]So now, let me show you some very cool features of this prototypal inheritance, theek hai? So ye bas ek demo tha, isko chhod do, theek hai? Iske upar hum wapas aayenge is example ke upar.

[7:59]Guys, tell me one thing, agar main yahan par ek let name bana ya fir ek let F name banata hoon, which is equals to Piyush.

[9:37]Ek bahut hi simple sa string, koi object nahi hai, koi kuch nahi hai. Ek baat batao, yahan par F name ka type kya hai? Agar main yahan pe baat karta hoon F name, F name ka type kya hai? You will say that F name na ek bahut hi simple sa string hai. Koi object nahi hai, koi complex data structure nahi hai, it's a very simple string. So mera question ye hai ki agar ye ek simple string hai, toh F name ke upar agar main dot karta hoon, toh ye sari properties kahan se aa rahi hain? You can see that yahan par hamare paas ek method hai at, character at, character code at, concatenate, endsWith, includes, indexOf, lastIndexOf, length, hamare paas ek property hai. So you can see that mere paas na yahan par bahut sare functions aa rahe hain. Ye functions kaise aa rahe hain? Main ek string ke upar dot operator ka use kar pa raha hoon. Correct? Main ek string ke upar dot operator ka use kaise kar pa raha hoon? And ye sare functions kahan se aa rahe hain? Similarly, similarly, agar main yahan par ek number banata hoon, x = 10, right? So what you will notice is ki x ke upar bhi kuch functions aa rahe hain, which is different. Toh ye kahan se aa rahe hain? Ek object ke bina, ek ek woh object bhi nahi hai, iske bawajood I can I am able to access these. Toh woh kaise aa rahe hain? So let me tell you that, that kya hota hai na, JavaScript ke andar na there is something known as wrapper classes, theek hai? So ab yahan pe dekhna, isko dhyan se samajhna, there is something known as wrapper classes. So wrapper classes kya hote hain, for example, aapke paas ek string class hoti hai, aapke paas ek number class hoti hai, aapke paas ek boolean class hoti hai. Abhi hum kya kar rahe hain na, abhi jo hum ye 10 use kar rahe hain ya fir jo abhi hum ye string use kar rahe hain na, ye primitive type hai, right? Ye kya hai? Primitive, simple, 10, string and all. Jab bhi aap is tarah se karte ho na, JavaScript actually mein na iske wrapper class ka use karti hai to create an object out of it. So matlab ki agar aap yahan par F name ko ek string ke equal karte ho na, ye basically kuch aisa dikhta hai that isko aapne kya kiya, string class ko use kiya jiske andar aapne value di and ye jo F name hai na, ye string class ka ek object hai, theek hai? Maine kya bola ki bhai jo F name hai na, woh string class ka object hai. Mujhe kaise pata ki F name string class ka object hai? Main kaise verify kar sakta hoon ki string class ka F name ek object hai? So let me tell you one thing very important ya fir ek bahut mast cheez dikhata hoon. Agar main yahan par console.log karta hoon F name ko, toh F name kya aa raha hai? Piyush Garg. Lekin agar main yahan par F name ke proto ke andar jata hoon. F name ke proto ke andar jata hoon. So can you see that F name ka jo proto hai, woh string class ko point kar raha hai? Can you see this thing? Ki F name ka jo underscore underscore proto underscore underscore hai, woh kahan point kar raha hai? Woh string class ke upar. And string class ke andar .at defined hai.

[12:59]So that is where this prototypal inheritance comes in. Is tarah se JavaScript ke andar inheritance kaam karta hai.

[13:18]Fine? Theek hai, toh ye cheez aapko samajh aayi? So that means what happens is ki jab bhi aap ek class banate ho, jab bhi aap koi class dekhte ho, let's say aapke paas ek built-in class hai string, right? So har class ke jo methods hote hain na, woh uske prototype ke andar hote hain. So yahan pe main aapko dikhata hoon, agar main yahan pe yahan pe search karta hoon string .prototype, theek hai? Toh yahan pe underscore underscore proto nahi aayega, prototype aayega. So ye hamara string ka prototype hai, that means hamara jo string class hai na, uska jo prototype hai, woh kuch aisa dikhta hai, uska jo structure hai, woh kuch aisa dikhta hai. Right? Jab bhi aap koi object banaoge string class ka, let's say maine yahan par F name banaya, which is equals to a new string, toh is case mein kya hoga? Jo ye string class ka prototype hai, matlab ki iska jo structure hai, woh F name ke underscore underscore proto ke andar dal diya jayega. That means jo F name ka underscore underscore proto hoga na, woh basically kya hoga, jo string class ka prototype hai. So that means objects ka jo underscore underscore proto hota hai, base class ke upar usko prototype kehte hain. So isse kya hoga ki jo bhi string ke functions hain, jo bhi string ki functionality hai, woh main apne F name object ke upar use kar sakta hoon. Kyu? Because jaise main koi functionality ko use karunga, F name ke andar woh nahi hogi, lekin JavaScript kya karegi usko apne proto ke andar dhoondhegi and usko woh mil jayegi. Toh is tarah se JavaScript inheritance ko aur object creation ko follow karti hai. Ye cheez samajh aayi? Ye cheez samajh aayi? Theek hai, bahut badhiya. Toh ek kaam karte hain, let me explain it to you more, theek hai? Ab aap thoda sa aur prototypes ke andar chalte hain. Let's say mere paas yahan par ek P1 object hai. P1 object ke andar main ek value rakhunga that ek property rakh lete hain x, theek hai? xp1, theek hai, jiski hum value rakh lete hain, I am inside P1 object, bahut hi simple. Ab agar mere paas ek P2 object hai, is P2 object ke andar hum ek rakh lete hain xp2, theek hai? And iski bhi hum value rakhte hain I am inside P2. Ab main kya karunga? Dekho, agar hum yahan par search karte hain, theek hai, is P2 ko uthate hain, toh ye P2 kya hai, P2 ek bahut hi simple sa object hai jiske andar you can see that xp2 hai, I am inside an object. Kya aap dekh sakte ho that xp2 ke upar ek prototype hai? Ye prototype kahan point kar raha hai? Object class ke upar. Can you see that? Built-in object class ke upar point kar raha hai. And is object class, matlab ki jo mera P2 object hai, uska jo proto hai, underscore underscore proto hai, woh kahan point kar raha hai? Object class ke upar. And object class ke upar phir se ek underscore underscore proto hai. Right? Dekho, ye hamara P2 object, P2 ka prototype object, object ke andar phir se ek underscore underscore proto which is an object and iska proto is finally null. Toh kya hua? Is cheez ko hum samjhenge, theek hai, abhi is cheez ko hum samjhenge. Okay, anyway chhod do abhi ke liye. Phir main ek aur P, ek aur object banana chahta hoon, that is P3. Toh ek kaam karte hain, isi ko hum copy kar lete hain and isko hum bolenge that xp3 that I am inside P3. Toh abhi mere paas yahan par teen objects hain, ye teeno objects ka aapas mein koi lena dena nahi hai. Ab let's say mere ko yahan par na prototypal inheritance ka use karna hai. Main chahta hoon ki P2 jo hai na, woh isko inherit kar le. Toh main kaise kar sakta hoon? Matlab I want to access this value in P2. Toh main ek kaam karta hoon na, iska jo underscore underscore proto hai, iska jo underscore underscore proto hai, kya main usko P1 ke agar equal kar doon. Agar main ye line likh deta hoon, so can I say that ab jo P2 hai, that is inheriting P1? Try karte hain. So ab agar main yahan par P2 ko karta hoon, so you can see that P2 ke paas khud ki ek property hai xp2. Iska jo prototype hai, woh kahan point kar raha hai? xp1 ke upar. Right? xp1 kya hai? I am inside P1. Toh that means ab main P2 ke upar .xp1 ko bhi access kar sakta hoon and main P2 ke upar xp2 ko bhi access kar sakta hoon. Ye maine kya kiya? Prototypal inheritance kar di. Similarly, ek kaam karte hain na. Iske underscore underscore proto ko hum kya karenge? P2 ke upar access kara denge. Toh ab kya hua? Ye P2 inherit kar raha hai P1 ko aur ye P3 inherit kar raha hai P2 ko. Toh isko ek kaam karte hain, visualize karte hain that what is happening, theek hai? So aapne pata hai kya kiya? Aapke paas na teen objects the. Theek hai? Aapke paas ye ek object tha pehle P1. P1 ke andar kya tha? P1 ke andar sirf ek single value thi that is this. Theek hai? Ye hamare P1 ke andar thi. Toh let me just write it in a clean way. And jo P1 ka underscore underscore proto underscore underscore tha, ye kahan point kar raha tha? Ek object class ke upar. Theek hai? Har cheez ka jo base hota hai that is object. Fine? Bahut badhiya. Phir aapne kya kiya? Phir aapne na ek P2 class banai, aapne ek P2 object banaya. So ye mera kya hai? Ye mera aa gaya P2. P2 ka underscore underscore proto aapne kya kiya? P1 ke upar point kara diya. So main yahan pe ek arrow ka use kar leta hoon, toh ye yahan par point karne lag gaya. Fine? Toh that means agar main P2 ke upar kisi bhi object ko access karne ka try karunga, pehle woh khud ke object mein search karega, ye xp2 hai by the way. And agar usko ye property yahan nahi milegi, underscore underscore proto mein jayega, which is P1. Phir humne kya kiya? Phir humne kya kiya? Phir humne ek aur object banaya P3, theek hai? Isko hum P3 bolte hain and iska proto humne point karwa diya iske upar. Fine? This is what we have done. Theek hai? So ab ab hum isko bolte hain that you are xp3. Ab dekho ideally hua kya? Jo P3 object hai, uska jo underscore underscore proto hai, uska jo underscore underscore proto hai, woh kya hai? Woh P2 hai. Hai na? Woh P2 hai. Toh kya main xp3 se, kya main P3 se, is value ko access kar sakta hoon? Kya main P3 se, kya main P3 se, is value ko access kar sakta hoon? Yes. Kyun? Because P3 kya karega, jab main bolunga, let's say P3.xp1 ko agar main access karne ka try karunga, toh woh kya karega, pehle woh khud ke object mein dhoondhega. Kya xp1 is object mein kahin lay karta hai? Nahi karta hai, toh woh underscore underscore proto mein jayega. Iska underscore underscore proto kahan ja raha hai? P2 ke upar. Kya yahan par aapke paas xp1 value hai? Nahi hai, toh woh prototype mein jayega, underscore underscore proto mein jayega. Uske baad phir woh dekhega, achcha, yahan aao. Phir woh isme dekhega ki kya aapke paas yahan par xp1 value hai? Bilkul hai, toh woh usko console.log ya fir woh hamare liye read kar dega. So that means using this structure main yahan par kya kar sakta hoon? P3 ke upar, you can see main xp1 ko bhi access kar pa raha hoon. Isko kehte hain prototypal inheritance and ye humne kya kiya? Ek prototypal chain bana di. Theek hai? Ye humne kya kiya? Prototypal chain bana di. So by default, ab yahan par ek bahut hi mast cheez hai. Any class or anything in JavaScript har ek ka na underscore underscore jo proto hota hai, woh object ki taraf point karta hai last mein. Kaise? Dekho, ye kaise traverse karta hai? Iska proto humne kar diya P2 ke upar. Iska proto humne kar diya P1 ke upar. By default iska proto kahan tha? Object ke upar. And jo object hota hai na, jo object class hai, uska jo underscore underscore proto hai na, woh kya hota hai? Woh hota hai null. Woh hota hai null. Toh JavaScript na tab tak aapke prototype ke andar jati rahegi jab tak usko ye underscore underscore proto null nahi mil jata. Ab yahan par ek bahut hi interesting cheez dikhata hoon. Ek kaam karte hain, string ki baat karte hain, theek hai? String. String kya hai? String ka prototype dekhe hain? Ya fir ek kaam karte hain na, ek simple sa string banate hain. So let, so let me just expand it, theek hai? Toh yahan pe dekhte hain. So agar main yahan pe bolta hoon let s equals hey there. s kya hai? s ek string hai. s.underscore underscore proto. Kahan ko point kar raha hai? String class ke upar. Hai na? Toh matlab ki maine kya kiya? Maine jab yahan pe bola let s equals something something, toh s ka jo underscore underscore proto tha, woh kahan ko point kar raha tha? String class ke upar. That means s kya hai? Ek string. Theek hai? Ab ek kaam karte hain, s ka underscore underscore proto kya hai? Ek string. Ek string ka wapas se underscore underscore proto dekhe? Kahan ko point kar raha hai? Kahan ko point kar raha hai? Object ke upar. Toh matlab ki jo ye string hai, ab ye jo string hai, is string ka jo underscore underscore proto hai, woh kahan ko point kar raha hai? Object ke upar. And is object ka jo underscore underscore proto hai, woh kya hai? Null. Hai na? Toh matlab ki is object ka jo aage underscore underscore proto hai, woh hai null. Toh that means, ye kahan se originate hua? Ye jo sari chain thi kahan se originate hui? Object se. Theek hai? Ek kaam karte hain, numbers ki baat kar lete hain. Let x equals 10. Toh x ka underscore underscore proto dekhte hain, theek hai? Kahan se aa raha hai? Number se aa raha hai. Toh matlab ki x ki jitni bhi values hain, woh number se aa rahi hain. Toh jo x humne banaya, uska underscore underscore jo proto hai, that was coming from a number class. Bahut badhiya. Theek hai? Ab ek kaam karte hain, number ka bhi aage dekh lete hain. Toh x.underscore underscore proto.underscore underscore proto. Toh kahan ja raha hai? Woh phir se object ke upar ja raha hai. Right? Object ke upar ja raha hai, toh matlab ki iska .underscore underscore proto is again an object. Ab object ka prototype toh aapko pata hai, null hota hai. Toh woh bhi kya hai? Null. Wapas se.

[22:47]Ab yahan pe chain toot gayi. Toh number bhi kahan se originate ho raha hai? Ek object class se originate ho raha hai. Ek kaam karte hain, ek boolean ko dekh lete hain. So let v, ya v le lete hain, is equals to true. Right? So ab agar main yahan pe karta hoon v.underscore underscore proto, toh ye kya hai? Ek boolean class. Toh yani ki maine kya kiya? Maine ek v bana do which is a boolean, I know. So v ka underscore underscore jo proto hai, that is a boolean class, theek hai? So boolean likh lete hain. Ab ek kaam karte hain, aage chalte hain. Boolean ka jo prototype hai, woh dekho, phir ek object hai. Hai na? Aur object ka prototype toh aapko pata hai kya hota hai? Object ka prototype is always null.

[26:33]Toh aapki jo ye student class hai, iska base bhi object hai because everything in JavaScript is an object. Toh ab ek baat batao, kya main s1 ke upar get name ko call kar sakta hoon? Kya main s1 ke upar dot get name ko call kar sakta hoon? Bilkul kar sakta hoon. Kyu? Because maine uska prototype student ke upar kar diya tha.

[31:11]Ab ek kaam karte hain yahan pe, theek hai? Main yahan par na ek choti si line likhunga s1.underscore underscore proto equals null. Toh main kya kiya? Prototype chain ko main break kar raha hoon. Theek hai? Ab agar main s1.instance likhunga, toh woh false aa jayega. Toh ab samajh aaya ki actually mein inheritance aur jab aap ek object banate ho, toh woh kaise determine karta hai ki ye kis class ko inherit kar raha hai? Ya kis class jo iski base class hai? So guys, this is how basically the prototypal inheritance and prototypes work in JavaScript. So interview point of view se bahut important topics hain, toh isko matlab badhiya tarike se samajh lo ki ye prototype and underscore underscore proto kaise kaam karte hain. So with that, let's end the video. Video kaisa laga, mujhe comments mein zaroor batana. Accha laga toh like and subscribe zaroor karna. Milte hain hum aapko next video ke andar. Until then, bye bye and take care.