Visually Understanding JavaScript Prototypes
Вставка
- Опубліковано 30 вер 2024
- 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...
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
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
Wow, it's amazing how a visual representation of an abstract concept can make things much easier, thanks!
*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
Nope. Free videos to help my own students plus anyone who wants to learn will continue to be my goal.
@@SteveGriffith-Prof3ssorSt3v3 Thank you, professor.
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!
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.
My goodness how simply you explained that. I've had comprehension issues with prototypes since learning about them, and it was that simple...
wonderful explanation, thank you!
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.
Prototype objects are how JS does inheritance. ua-cam.com/video/GhJTy5-X3kA/v-deo.html
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!
Really easy to understand i was feeling confusing before what i saw here, thank you bro! awesome explanation 👊
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?
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
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.
Finally someone who properly explained what exactly is prototypes in js....
Clear cut explanation/ Underrated Explanation...
I mean, for real, me head just exploded, I thought I had understood this before, NOW I really understand it 😄
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.
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?
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.
you just got a new follower. amazing explenation. tnx
Thank you so much! Definitely one of the best explanations for this topic on UA-cam.
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.
You lost me in the first 37 seconds!
same :)
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__?
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 _ _"
Thank you very much. Your explanation really hit the spot!
Best explanation of the concept so farr !
This is the best explanation so far on the prototype chain.
You got one subscriber.
is Object.prototype = Object?
`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.
Thank you, thank you, thank you!!!:) You are awesome!!!
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?
@@alexagranov3094 yep.
Very good explanation. Thank you sir
THANK YOU. i needed a visual representation.
Best explanation I found for this, good job!
finally a drawing !!! Thank you ! now I finally get it :D
Great video, it refreshed my mind about the topic.
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?
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.
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.
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.
thanks for the visual explanation, it helped a lot
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.
It's how I get paid for the hundreds and hundreds of hours that I put into making these videos. 😀
It was great explanation, Thanks!!!
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?
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.
just what I needed ...Thanks a lot sir :)
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??
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.
Tanks ! It's really good :)
You are amazing. Thank you so much!
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
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.
why is the cat's prototype the Objetc's prototype? Is it because cat's prototype constructed by Object? Why is that? Thank you.
This might help you understand - ua-cam.com/video/GhJTy5-X3kA/v-deo.html
Good thing you know how to code! _jk_
Lol. First day with the new tablet. You'd never know I can actually draw.
Does "Object.setPrototypeOf" work the same as "extends" for a class?
yes. If you are talking about the JavaScript extends, that is exactly what you are doing.
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?
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.
Thank you for taking your time making the answer.
makes it even harder to understand for me
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
It's the same. You are just seeing the properties inside of each
@@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.
i like his voice :f
its like he's wooing me
You deserve subscriber in millions❤
You just saved me man, thanks a lot!
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!
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
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.
instaBlaster...
Legend whom not many knows
Thank you thank you thank youuuuuuuuuu
Professor..you're amazing
Extremely amazing
Awesome, thank you
very good. Thanks.
merci vraiment je devenais fou carrement
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!
From my understanding would this be correct
myObj.__proto__ --> constructor.prototype constructor.prototype.__proto__ --> Object.prototype Object.prototype__ proto__ ---> null
yes. But the non-standard __proto__ is something that you should leave out of your code now.
@@SteveGriffith-Prof3ssorSt3v3 I'm running the code in Deno and Deno doesn't even implement __proto__, I have to use Object.getPrototypeOf(kitty) instead.
@M Do no it doesn't. Dunderproto was a non standards property added in the browser a long time ago to access prototypes.
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.. 🤯
That's couldn't be any further clearer, thank you for awesome teaching. You really nailed it🎉
I just love you
thank you! finally I understood this chain of prototypes, couldn't figure it out for so long!
Really well done. Currently learning about prototypes and the prototype chain and this video solved all of my questions. Thanks!
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?
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.
@@SteveGriffith-Prof3ssorSt3v3 Thank you very much!
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?
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.
@@SteveGriffith-Prof3ssorSt3v3 So basically they work very similarly but the difference is kind of in the memory
@@pavlerakic3951 and in how you write and manage the inheritance chain.
Thank you Steve, you explain everything so clear! I appreciate it.
Bro! You’re the man! Your explanations are the best 🤘😎🤘
thank you professor, the visual example was extremely helpful
Sub, you are great !
Great video. Your voice pace and pitch is perfect for a good understanding!
thanks that help a lot
you sooo gud !!!
Object-ception
Knowlage is good for the soul...
and the wallet XD
On me! 😂💸
thank you
the bestttttt
How did you manage to demo the code on the VSCode terminal? Nice explanation btw.
Just open the terminal and use NodeJs to run the file.
> node main.js
as an example.
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 ?
The prototype and __proto__ can point to the same thing but the first belongs to functions and the second belongs to object instances
myFunction.prototype
myObject.__proto__
@@SteveGriffith-Prof3ssorSt3v3 this explains it all, this was missing.
@@halalmeatshophk I've done other videos about this too. Here is one - ua-cam.com/video/GhJTy5-X3kA/v-deo.html
HI, Man. I am dev jr. I would like to see some real example of prototype. You could make a video with a real example? Thanks. Bye.
I have several other videos that talk about prototypes too:
ua-cam.com/video/GhJTy5-X3kA/v-deo.html
ua-cam.com/video/XoQKXDWbL1M/v-deo.html
ua-cam.com/video/7C8xKTHd6Mw/v-deo.html
ua-cam.com/video/2jpAEz-hUKY/v-deo.html
ua-cam.com/video/dgpaY5wjJ9w/v-deo.html
Good use of Sketch to explain it. What colour theme for VSCode are you using? It is a good one.
Default Dark+
neat
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?
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.
so does this mean the 'extends' and 'setPrototypeOf' are just doing the same thing?
yep. ua-cam.com/video/XoQKXDWbL1M/v-deo.html
Another very cool tutorial!
It is really great work :)
♥️ awesome narration. Thank you sir.
Excellent explanation as always!
How many prototype object are in the chain for the following array ?
let arr = [];
please provide answer..
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.
@@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])
}
What is the usecase of this?
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.
@@SteveGriffith-Prof3ssorSt3v3 Understood, thank you for the comment.
Does something like a JS reset exist?
let c = console.log();
...?
What do you mean by reset?
@@SteveGriffith-Prof3ssorSt3v3 like CSS has resets. Maybe JS can have one too. Like changing the long ass "console.log():" to something like "c();"
@@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( ).
@@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()"
@@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.
A good video on prototype. What is difference between __proto__ and prototype property?
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.
@@SteveGriffith-Prof3ssorSt3v3 Thank you Steve for your quick reply..
Great tutorial on prototype, very clear, but what is the real use on real life, is there easy example, thx
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.
@@SteveGriffith-Prof3ssorSt3v3 thanks Steve for clearing it out, so basic stuff that needs to be understood, clearly!
Great and well explained
Life saver!