Visually Understanding JavaScript Prototypes

Instead of only writing code, this time I am drawing some diagrams to try and help people understand how prototypes work in JavaScript.
Code sample from Video - gist.github.co...

[@find_me8830]

Wow, it's amazing how a visual representation of an abstract concept can make things much easier, thanks!

[@zackfair8638]

My goodness how simply you explained that. I've had comprehension issues with prototypes since learning about them, and it was that simple...

[@jvsvogler]

I'm only halfway through the video and you already clarified what I wanted to know! Thank you so much for this, you are a brilliant teacher!! I feel like most written content I came across on this subject becomes very abstract and repetitive too quickly which makes this look like it is something so complex that I would never be able to understand... turns out that I already was familiar with how it works, so your video helped it "click". Definitely deserved the sub and I really hope your channel keeps growing!! Ty

[@TheOneTap_King]

Finally someone who properly explained what exactly is prototypes in js.... Clear cut explanation/ Underrated Explanation...

[@Kazutadashi]

This video is truly incredible in how concise and clear it is. I watched several other videos before this one and always felt somewhat unsure of what was actually going on, or how things weren't being "overwritten" in the chain. After I watched this it became crystal clear on exactly what was going on. Thank you for making this awesome video!

[@criticalthinker1123]

*This channel is underrated!* Don't walk away, hit the like button and subs so it reaches others and this channel grows. The only problem is when this channel grows, he might stop giving free courses lol

[@SteveGriffith-Prof3ssorSt3v3]

Nope. Free videos to help my own students plus anyone who wants to learn will continue to be my goal.

[@ke6944]

@@SteveGriffith-Prof3ssorSt3v3 Thank you, professor.

[@ronron7763]

Read many books and saw tutes but diagrammetically its crystal clear. thank you

[@ilovelctr]

This really rocks! So every constructor function has a prototype object, which can be accessed by calling __proto__ on an instance created by the constructor function itself.

[@udaydevikar9659]

This is the best explanation so far on the prototype chain. You got one subscriber.

[@velifurkanturkoglu1387]

This is the most complete explanation i have ever seen Thank you so much. Definetely subbed and will be watching all the other concepts you explain! With love and greetings from Turkey!

[@rodinCodin]

wonderful explanation, thank you!

[@rockwu6376]

Hello, I like the way you explain the prototype of js! It's really better for me to understand. I couldn't distinguish between the prototype and the __proto__, but I can distinguish them by the triangle you painted. Amazing!

[@benjaminbartelt4321]

One of the clearest, most informative tech channels I've come across. Thank you for creating this content

[@mattsmith6828]

You are SO awesome for making this video. Admittedly, I had to watch this a 2nd time, but now it all makes sense! Thank you!

[@UCezRMC]

thank you! finally I understood this chain of prototypes, couldn't figure it out for so long!

[@minigooshey]

Wow, what a beautiful explanation of prototypes. It was a bit convoluted when I learned about it recently, but this explains it very clearly. Great video, thank you.

[@mathieumorin2326]

Great video. Your voice pace and pitch is perfect for a good understanding!

[@LGalastro]

Thank you so much! Definitely one of the best explanations for this topic on KZbin.

[@blsdudu]

Really easy to understand i was feeling confusing before what i saw here, thank you bro! awesome explanation 👊

[@mridulkhurana533]

Best explanation of the concept so farr !

[@B-Billy]

That's couldn't be any further clearer, thank you for awesome teaching. You really nailed it🎉

[@JPNSynster]

Definitely deserve more views, I love your videos and how you explain concepts . Honestly just watch for fun since I've already gone over concepts one should know. Thanks for the lessons.

[@jeffreyaryan9472]

instaBlaster...

[@nrgaard1533]

Best explanation I found for this, good job!

[@EarthBuddyGuy]

Really well done. Currently learning about prototypes and the prototype chain and this video solved all of my questions. Thanks!

[@Kurkov12]

Thank you very much. Your explanation really hit the spot!

[@CastorMilano]

Bro! You’re the man! Your explanations are the best 🤘😎🤘

[@nicopicco]

I am sure there is a lot of good information in the video...but I will have to watch this 10 more times...on acid LOL

[@Ludo045]

man, this video is incredible. The stuff was confusing for a long time. Now with these 2 diagrams of _kitty_ object from a contructor and an _object written litteral_ it just became so clear. i just refer either kitty and litteral object in my head when im in front of such case and i find my foot now Damn.. 🤯

[@CastorMilano]

I mean, for real, me head just exploded, I thought I had understood this before, NOW I really understand it 😄

[@focusiam2027]

Thank you Steve, you explain everything so clear! I appreciate it.

[@HelixJohnsons]

Great video, it refreshed my mind about the topic.

[@andresroca9736]

Thanks man!. Really good explanation using that triangular visual approach. That's the best way to study software; diagrams outrange plain code to grasp knowledge. Gonna check your channel. Saludos

[@jondo-vh8tx]

you just got a new follower. amazing explenation. tnx

[@sooollchhu]

THANK YOU. i needed a visual representation.

[@fatimakhalid4428]

thank u so much this is the only tutorial that helped me understand

[@Thats_Handle0]

Professor..you're amazing Extremely amazing

[@sujaigorai7752]

You deserve subscriber in millions❤

[@Zeyz607]

thanks for the visual explanation, it helped a lot

[@halaidris4737]

finally a drawing !!! Thank you ! now I finally get it :D

[@davidsaavedravazquez5890]

You just saved me man, thanks a lot!

[@SlipSlidinAway1]

Holy smokes, the ads the ads the ads. I’m concentrating on your (fantastic) lesson and just keep getting interrupted with ads that break my concentration. I’m ready to throw the device against the wall.

[@SteveGriffith-Prof3ssorSt3v3]

It's how I get paid for the hundreds and hundreds of hours that I put into making these videos. 😀

[@dumpster-m3j]

i am halfway through the video and i already understood and got what i was looking for. thanks a ton! it would have been helpful if you would have explained why all functions have a prototype because i did not know that functions are objects

[@SteveGriffith-Prof3ssorSt3v3]

In JavaScript every value is one of two things: 1. A primitive value (String, Number, Boolean, null, undefined, BigInt, Symbol) 2. An object (EVERY OTHER VALUE if not a primitive is an object) If you can put something into a variable then it is a value. That includes functions. I've done other videos on Functions, Object, Datatypes, and Prototypes too, which explain other related concepts.

[@whyami6749]

Very good explanation. Thank you sir

[@nemanjadjoric8765]

Thank you, thank you, thank you!!!:) You are awesome!!!

[@ronitkumar19]

just what I needed ...Thanks a lot sir :)

[@shaharyair4314]

You are amazing. Thank you so much!

[@davitbokuchava6767]

It was great explanation, Thanks!!!

[@vs-cd6qq]

Thank you, very informative!

[@chesterxp508]

Another very cool tutorial!

[@magburner]

MyObj is connected to the prototype of the constructor function (new object), then the object prototype, and then null. You can see that when you look at __proto__ for myObj.

[@eumm11]

thank you professor, the visual example was extremely helpful

[@adrienpusel4105]

Tanks ! It's really good :)

[@Snoo29293]

Thanks a lot, I feel like I understand objects way better now, I can finally see the full picture of what exactly happens when I create an object.

[@amrzaki850]

Awesome, thank you

[@karthikr7956]

very good. Thanks.

[@Uturriit]

Legend whom not many knows

[@anusree114]

♥️ awesome narration. Thank you sir.

[@mrSargi7]

Excellent explanation as always!

[@frankgute4456]

It is really great work :)

[@federicobau8651]

Great and well explained

[@objectObject212]

Great - as always 🙂

[@katkodes6055]

So good! The visual representation really helps newbies. Thank you

[@cooookie1993]

Hi, very good video, I do have one question however. If you didn't define a myObj variable would the Cat constructor still have to __proto__ of object prototype?

[@SteveGriffith-Prof3ssorSt3v3]

myObj is an object literal. It is an object of type Object. It was built by calling the Object( ) function. kitty is an object of type Cat. It was built by calling the Cat( ) function. myObj and kitty are both objects which are NOT functions. functions have a `prototype` objects that are not functions have a __proto__ property which points to the prototype belonging to their constructor function. JavaScript connects the `prototype` objects in a hierarchical chain. There is a parent child relationship with the prototypes. null is at the top Object.prototype is below null (the built-in object) Cat.prototype is below Object.prototype (our custom object) Array.prototype is also below Object.prototype, at the same level as Cat.prototype. myObj and kitty are not connected at all. myObj and Cat( ) are not connected at all. They don't care about each other.

[@yonglizhang1853]

Very good visual explaination! I have some questions. Does contructor function has __proto__ if yes where it links to and what is the usage? The prototype chain: obj.__proto__ (which is Contructor.prototype). the next level: does it follow Contructor.prototype.__proto__ or Contructor.__proto__?

[@SteveGriffith-Prof3ssorSt3v3]

All constructor functions have a prototype object that is connected to them. When you write let obj = new Object(); or let obj = { }; then you are calling the Object constructor function. The function has a prototype object connected to it via the property "prototype". The variable obj is an instance created by the function Object(). It can reference the "prototype" belonging to function Object() through the dunderscore property "_ _ proto _ _"

[@anuragkushwaaha2091]

One thing you might get confused with is accessing an object's prototype by using .prototype. for example let's say you have an object named Jason then you cannot access it's prototype like this : Jason.prototype Instead you should use Jason.__proto__ or Object.getPrototypeOf(Jason). The point is that in order to access Jason's prototype there may be several ways but `Jason.prototype` is not one of them.

[@SteveGriffith-Prof3ssorSt3v3]

The easy way to remember it is: Objects have a __proto__ property. Functions have a prototype property. The whole prototype chain is made up of Objects.

[@cuy4z]

Thank you thank you thank youuuuuuuuuu

[@mky5845]

you sooo gud !!!

[@bilelmoudache1478]

merci vraiment je devenais fou carrement

[@yousefsadeek6640]

thanks that help a lot

[@borderlesssynthetic4164]

Amazing!

[@BedNik85]

Life saver!

[@iwswordpress]

Good use of Sketch to explain it. What colour theme for VSCode are you using? It is a good one.

[@SteveGriffith-Prof3ssorSt3v3]

Default Dark+

[@jacklinus6811]

So two completely separate classes with separate methods and when new instances are created will be connected up the __proto__ chain? The two separate classes wont share method properties but they will share the object.prototype null? If this is incorrect then how does myObj share or relate to cat()?

[@SteveGriffith-Prof3ssorSt3v3]

null is always the top of the chain. By default, Object.prototype is under that and the chain goes from there to other types of objects. Eg: Array.prototype => Object.prototype => null MyCustomObject.prototype => Object.prototype => null However, you can change the prototype of your custom object to be any other object. MyCustomObject and Object could both use Object.prototype as their prototype object, you could define that when building your custom object. If you create an object literal, then that is being built with the Object() constructor, which means that Object.prototype is its prototype by default. If you are creating multiple custom objects, you decide if they share Object.prototype or if they each have their own prototype. Then you decide if you want those to both point to Object.prototype as sibling inheritors OR if you want customObjectA.prototype to inherit from customObjectB.prototype instead. And then have customObjectB.prototype inherit from Object.prototype

[@hollowjohnny]

Does 'kitty.__proto__.__proto__ === Object.prototype' mean its the same instance in memory? As in all object share a singleton base proto, or is it a different instance of the same thing??

[@SteveGriffith-Prof3ssorSt3v3]

Yes. There is only one Object.prototype object. Just like there is only one Cat.prototype object. All the objects created by calling new Cat( ) will share the same Cat.prototype and in turn they all share the same Object.prototype. The === means they are the same object in memory.

[@alexagranov3094]

So in a nutshell, everything in JavaScript(except null) is an object and all objects contain a prototype chain that terminates in __proto__ = null? JavaScript will walk the prototype chain to resolve a property or method until it reaches it, or terminates in an error because it reaches null?

[@SteveGriffith-Prof3ssorSt3v3]

@@alexagranov3094 yep.

[@pandabuddy1655]

Thanks. Congrats.

[@vipinsharma-zx9cb]

What about the normal js functions() which we don't initialize using new keyword like constructor functions.... will these normal functions will also create an object?

[@SteveGriffith-Prof3ssorSt3v3]

Any function called without the new keyword will only return what you tell it to return with the keyword 'return'. Without the keyword the function returns undefined.

[@matrix5368]

I just love you

[@kennedydre8074]

I still don't understand what prototype is exactly. You assumed we already know what prototypes are and went ahead to explain inheritance, I don't know what prototypes are.

[@SteveGriffith-Prof3ssorSt3v3]

Prototype objects are how JS does inheritance. kzbin.info/www/bejne/fZmthaxrYr1moaM

[@victoryjohn-great965]

the bestttttt

[@rotrose7531]

Thank you very much, these concepts are so easy to understand after explained by you. I have a little question, while log(kitty.__proto__.__proto__.__proto__.__proto__) ; successfully returns null, log(Object.__proto__.__proto__);, however returns an empty object {}; Only after I changed it to log(Object.prototype.__proto__); then I got null. Why log(Object.__proto__.__proto__); and log(Object.prototype.__proto__); are not interchangeable in this situation?

[@SteveGriffith-Prof3ssorSt3v3]

That's a great question. I've never tried to use that. Mostly because using dunder-proto is considered to be bad practice now. getPrototypeOf( ) is the recommended method.

[@rotrose7531]

Thank you for taking your time making the answer.

[@sr.railn.m.667]

man, Im trying to understand how JS work for a schoolwork, and I have a big doubt. Constructors are functions and objects? prototype is a property of the constructor?

[@SteveGriffith-Prof3ssorSt3v3]

In JavaScript, there are six Primitives - Numbers, Strings, Booleans, null, undefined and Symbol. Everything else is an Object. Arrays are objects. Functions are objects, Objects are objects. etc. Constructors are a type of function (which means they are objects too). Every function is automatically given a prototype object. It is not a property of the function, it is an object that is connected to the function. The "prototype" property of the function points to the prototype object.

[@mentalisme]

makes it even harder to understand for me

[@XxXgabbO95XxX]

How did you manage to demo the code on the VSCode terminal? Nice explanation btw.

[@SteveGriffith-Prof3ssorSt3v3]

Just open the terminal and use NodeJs to run the file. > node main.js as an example.

[@prince5922]

How does myObj have a constructor? How and where? 0:56

[@SteveGriffith-Prof3ssorSt3v3]

Every object in JavaScript has a constructor function. If you are creating a basic object literal then the constructor is the function Object( ) { }.

[@mattsmith6828]

Does "Object.setPrototypeOf" work the same as "extends" for a class?

[@SteveGriffith-Prof3ssorSt3v3]

yes. If you are talking about the JavaScript extends, that is exactly what you are doing.

[@hadialawieh5285]

I have **copied** and **pasted** the code from the repo in VSCode, this is what I got: Animal {} {} [Object: null prototype] {} null and Not: Cat{} Animal{} {} null Can somebody please explain why?

[@liuliang227]

why is the cat's prototype the Objetc's prototype? Is it because cat's prototype constructed by Object? Why is that? Thank you.

[@SteveGriffith-Prof3ssorSt3v3]

This might help you understand - kzbin.info/www/bejne/fZmthaxrYr1moaM

[@RajeshSahu-qp6cc]

A good video on prototype. What is difference between __proto__ and prototype property?

[@SteveGriffith-Prof3ssorSt3v3]

They are two different words that can point to the same object. prototype is the link from the constructor function to its prototype. Prototype is the standards way of getting to it. __proto__ was something that was added as a non-standard way, in the browser of getting to the prototype object from the instance objects created by the constructor function. Object.getPrototypeOf and Object.setPrototypeOf were added in ES5 as a standards compliant way of replacing __proto__. IIn ES6 they gave up and talked about __proto__ in the standard but it is still not a recommended way to access the prototype. It is supposed to be accessed and changed through the constructor function's prototype property.

[@RajeshSahu-qp6cc]

@@SteveGriffith-Prof3ssorSt3v3 Thank you Steve for your quick reply..

[@pavlerakic3951]

So once again whats the difference between classes and prototypes? Like I have no clue, I watched 3 vids and I still don't know what's the difference. Even in class based OOPs you get every object/class to inherit from the top parent class Object. So what would be the difference?

[@SteveGriffith-Prof3ssorSt3v3]

The short answer is that when you build a sub-class, it gets a copy of all the super class methods. No methods get copied with prototypes. The methods are all stored inside a prototype object and JS will search through the prototype chain for a method name that matches the one being called.

[@pavlerakic3951]

@@SteveGriffith-Prof3ssorSt3v3 So basically they work very similarly but the difference is kind of in the memory

[@SteveGriffith-Prof3ssorSt3v3]

@@pavlerakic3951 and in how you write and manage the inheritance chain.

[@iacopoermini7374]

I didn't understand why inside the constructor property there is another prototype property if this is equivalent to PrototypeObject.prototype. What is its purpose?

[@SteveGriffith-Prof3ssorSt3v3]

It's a circular reference. All objects are able to point to each other so regardless of which object you have in a variable you can always find the others.

[@iacopoermini7374]

@@SteveGriffith-Prof3ssorSt3v3 Thank you very much!

[@spoodermen2530]

i like his voice :f its like he's wooing me

[@michaelmudge3080]

so does this mean the 'extends' and 'setPrototypeOf' are just doing the same thing?

[@SteveGriffith-Prof3ssorSt3v3]

yep. kzbin.info/www/bejne/jqC0fIt6jMd_Z68

[@kinstar]

From my understanding would this be correct myObj.__proto__ --> constructor.prototype constructor.prototype.__proto__ --> Object.prototype Object.prototype__ proto__ ---> null

[@SteveGriffith-Prof3ssorSt3v3]

yes. But the non-standard __proto__ is something that you should leave out of your code now.

[@MDo-ww9wm]

@@SteveGriffith-Prof3ssorSt3v3 I'm running the code in Deno and Deno doesn't even implement __proto__, I have to use Object.getPrototypeOf(kitty) instead.

[@SteveGriffith-Prof3ssorSt3v3]

@M Do no it doesn't. Dunderproto was a non standards property added in the browser a long time ago to access prototypes.

[@halalmeatshophk]

these 2 things are confusing : dot.__proto__ and dot.prototype ? aren't they the same thing and serve the same purpose? why call them differently ?

[@SteveGriffith-Prof3ssorSt3v3]

The prototype and __proto__ can point to the same thing but the first belongs to functions and the second belongs to object instances

[@SteveGriffith-Prof3ssorSt3v3]

myFunction.prototype myObject.__proto__

[@halalmeatshophk]

@@SteveGriffith-Prof3ssorSt3v3 this explains it all, this was missing.

[@SteveGriffith-Prof3ssorSt3v3]

@@halalmeatshophk I've done other videos about this too. Here is one - kzbin.info/www/bejne/fZmthaxrYr1moaM

[@saifullahmansur6607]

When we set Cat.prototype to Animal.prototype I am not getting Cat{}, Animal{}, {}, null. Instead I am getting : Animal {constructor: ƒ} {constructor: ƒ} {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__ null. Help me figure this out

[@SteveGriffith-Prof3ssorSt3v3]

It's the same. You are just seeing the properties inside of each

[@saifullahmansur6607]

@@SteveGriffith-Prof3ssorSt3v3 But sir where is the second object ( {constructor: ƒ} ) coming from? What is it? From my perspective kitty.__proto__.__proto__.__proto__ should give us null.

[@yubin_jo]

thank you

[@anikoveiszhab8652]

Hello Steve I am really grateful for your videos. I have only started Js few weeks ago so may have a "for dummies" question. I had a different result when I recreated on classes and extended subclasses and I can't get my head around why. Would you be so nice to help me out?

[@SteveGriffith-Prof3ssorSt3v3]

When working with JS you have to keep in mind that it is not a class based language. You won't build things with the same approach as you would in other classed languages. Honestly, there is so much more to learn about the language before you even touch on prototypes or the class keyword. - closures, scope, how functions handle input and output, primitives vs objects, shallow and deep copying, and more. When I'm teaching JS in class I don't even talk about prototypes or the differences with the class keyword for the first 4 months.

[@F4ILCON]

Great tutorial on prototype, very clear, but what is the real use on real life, is there easy example, thx

[@SteveGriffith-Prof3ssorSt3v3]

Prototypes are how inheritance works in JS. It is built-in. They are part of everything that you will every create in JS. It's why you can do things like use .toString( ) on any object, because the toString method is inside the Object prototype and the prototype chain always leads there.

[@F4ILCON]

@@SteveGriffith-Prof3ssorSt3v3 thanks Steve for clearing it out, so basic stuff that needs to be understood, clearly!

[@Human_Evolution-]

Does something like a JS reset exist? let c = console.log(); ...?

[@SteveGriffith-Prof3ssorSt3v3]

What do you mean by reset?

[@Human_Evolution-]

@@SteveGriffith-Prof3ssorSt3v3 like CSS has resets. Maybe JS can have one too. Like changing the long ass "console.log():" to something like "c();"

[@SteveGriffith-Prof3ssorSt3v3]

@@Human_Evolution- I frequently do that with console.log in my videos. It's nothing like a CSS reset though. CSS resets are for clearing out values of properties to standardize them across browsers. As for the console thing, any function or method can be assigned to a different variable. const log = console.log; Now you can call log( ) instead of console.log( ).

[@Human_Evolution-]

@@SteveGriffith-Prof3ssorSt3v3 I wish everyone would join together and have JS scripted get rid of console., I'd much rather have it just be log. Coming to JS from Python, this annoys me. I miss "print()"

[@SteveGriffith-Prof3ssorSt3v3]

@@Human_Evolution- it's only one line of code that you need to add at the top of your file and you can. Plus console has dozens of other methods beyond log.