Visually Understanding JavaScript Prototypes

[@find_me8830]

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

[@TheOneTap_King]

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

[@ronron7763]

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

[@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

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

[@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!

[@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!

[@udaydevikar9659]

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

[@UCezRMC]

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

[@mridulkhurana533]

Best explanation of the concept so farr !

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

[@mathieumorin2326]

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

[@B-Billy]

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

[@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!

[@rodinCodin]

wonderful explanation, thank you!

[@benjaminbartelt4321]

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

[@blsdudu]

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

[@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!

[@LGalastro]

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

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

[@jondo-vh8tx]

you just got a new follower. amazing explenation. tnx

[@CastorMilano]

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

[@nrgaard1533]

Best explanation I found for this, good job!

[@CastorMilano]

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

[@KurkoVarangian-kg2zj]

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

[@sujaigorai7752]

You deserve subscriber in millions❤

[@HelixJohnsons]

Great video, it refreshed my mind about the topic.

[@EarthBuddyGuy]

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

[@Thats_Handle0]

Professor..you're amazing Extremely amazing

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

[@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

[@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.. 🤯

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

[@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

[@focusiam2027]

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

[@fatimakhalid4428]

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

[@sooollchhu]

THANK YOU. i needed a visual representation.

[@whyami6749]

Very good explanation. Thank you sir

[@halaidris4737]

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

[@Zeyz607]

thanks for the visual explanation, it helped a lot

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

[@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. 😀

[@ronitkumar19]

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

[@davidsaavedravazquez5890]

You just saved me man, thanks a lot!

[@eumm11]

thank you professor, the visual example was extremely helpful

[@nemanjadjoric8765]

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

[@chesterxp508]

Another very cool tutorial!

[@davitbokuchava6767]

It was great explanation, Thanks!!!

[@vs-cd6qq]

Thank you, very informative!

[@shaharyair4314]

You are amazing. Thank you so much!

[@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( ) { }.

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

[@anusree114]

♥️ awesome narration. Thank you sir.

[@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 _ _"

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

[@frankgute4456]

It is really great work :)

[@adrienpusel4105]

Tanks ! It's really good :)

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

[@ayqikz]

Legend whom not many knows

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

[@mrSargi7]

Excellent explanation as always!

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

[@armandodeleon7275]

Excellent video, especially the diagrams, really helpful. However, at minute 13.55, I have the following 4 console logs out of Chrome. I know the proto of kitty is Cat, but the console output is confusing, it starts with "Animal {constructor: f} and then "constructor: f Cat()", which I assume is what you show in the video. Why is the first line shown? How should I interpret it? Thanks! Animal {constructor: ƒ} constructor: ƒ Cat() __proto__: Object {constructor: ƒ} constructor: ƒ Animal() __proto__: Object {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …} constructor: ƒ Object()........ null

[@SteveGriffith-Prof3ssorSt3v3]

Depending on which version of Node you are using or if you are running the code in a browser you will get slightly different outputs. Here is the output I get now, using Node 14.16.0 (when I recorded this video I was likely using Node v 12) Animal {} {} [Object: null prototype] {} null The prototype chain is still the same. kitty -> Cat.prototype -> Animal.prototype -> Object.prototype -> null If you look at the first 3 lines of your output, it means: kitty was created by the Cat constructor function, kitty is an instance object of Cat( ). The next thing up the prototype chain is Animal, which is also a constructor function and whose __proto__ value is Object. So it is actually giving you two levels of information.

[@federicobau8651]

Great and well explained

[@katkodes6055]

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

[@karthikr7956]

very good. Thanks.

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

[@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!

[@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+

[@amrzaki850]

Awesome, thank you

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

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

[@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

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

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

[@rajkir2852]

is Object.prototype = Object?

[@SteveGriffith-Prof3ssorSt3v3]

`Object` is the function that creates objects. `Object.prototype` is the object that holds all the shared methods that ALL objects will possess via the prototype chain. `Object.prototype.constructor` points back at the `Object` function that is used to create all objects. Above `Object` in the prototype chain is null. That's where it ends.

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

[@michaelmudge3080]

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

[@SteveGriffith-Prof3ssorSt3v3]

yep. kzbin.info/www/bejne/jqC0fIt6jMd_Z68

[@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?

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

[@nanu180]

How many prototype object are in the chain for the following array ? let arr = []; please provide answer..

[@SteveGriffith-Prof3ssorSt3v3]

An array is created by the Array( ) constructor function. That function has a prototype. Above it is the prototype of the Object( ) constructor function. Above that is null. You can always find out by just adding more and more of the __proto__ property in the chain like this: arr.__proto__ arr.__proto__.__proto__ arr.__proto__.__proto__.__proto__ Just keep going until the value is null. Or do this in a while loop.

[@nanu180]

@@SteveGriffith-Prof3ssorSt3v3 Sir , I have to try to print all method of array as following, But output is undefined : var arr =[]; for (prop in arr.__proto__){ console.dir(prop, ":", arr.__proto__, "::::", arr.__proto__.prop, "::::::", arr.__proto__[prop]) }

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

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

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

[@objectObject212]

Great - as always 🙂

[@syedazeemjaved]

What is the usecase of this?

[@SteveGriffith-Prof3ssorSt3v3]

It's not something that has a use case or that you add to your code. This is how objects and inheritance work in JS.

[@syedazeemjaved]

@@SteveGriffith-Prof3ssorSt3v3 Understood, thank you for the comment.

[@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

[@bilelmoudache1478]

merci vraiment je devenais fou carrement

[@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!

[@yousefsadeek6640]

thanks that help a lot

[@mentalisme]

makes it even harder to understand for me

[@BedNik85]

Life saver!

[@mky5845]

you sooo gud !!!

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

[@cuy4z]

Thank you thank you thank youuuuuuuuuu

[@amlife180]

Can you please Visually explain other topics such as nodejs streams! Thanks

[@SteveGriffith-Prof3ssorSt3v3]

I will definitely make more videos with sketches in the future.

[@victoryjohn-great965]

the bestttttt

[@pandabuddy1655]

Thanks. Congrats.

[@matrix5368]

I just love you