Visually Understanding JavaScript Prototypes
ฝัง
- เผยแพร่เมื่อ 10 ก.พ. 2020
- 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.com/prof3ssorSt3v...
Wow, it's amazing how a visual representation of an abstract concept can make things much easier, thanks!
My goodness how simply you explained that. I've had comprehension issues with prototypes since learning about them, and it was that simple...
Finally someone who properly explained what exactly is prototypes in js....
Clear cut explanation/ Underrated Explanation...
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
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!
This is the best explanation so far on the prototype chain.
You got one subscriber.
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.
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!
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...
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.
*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.
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!
Best explanation of the concept so farr !
Really well done. Currently learning about prototypes and the prototype chain and this video solved all of my questions. Thanks!
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!
Thank you so much! Definitely one of the best explanations for this topic on TH-cam.
Thank you Steve, you explain everything so clear! I appreciate it.
Best explanation I found for this, good job!
That's couldn't be any further clearer, thank you for awesome teaching. You really nailed it🎉
thank you! finally I understood this chain of prototypes, couldn't figure it out for so long!
Great video. Your voice pace and pitch is perfect for a good understanding!
One of the clearest, most informative tech channels I've come across. Thank you for creating this content
Really easy to understand i was feeling confusing before what i saw here, thank you bro! awesome explanation 👊
Thank you very much. Your explanation really hit the spot!
Another very cool tutorial!
You deserve subscriber in millions❤
wonderful explanation, thank you!
Bro! You’re the man! Your explanations are the best 🤘😎🤘
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.. 🤯
♥️ awesome narration. Thank you sir.
thank you professor, the visual example was extremely helpful
Excellent explanation as always!
Professor..you're amazing
Extremely amazing
THANK YOU. i needed a visual representation.
You just saved me man, thanks a lot!
You are amazing. Thank you so much!
Great video, it refreshed my mind about the topic.
thanks for the visual explanation, it helped a lot
finally a drawing !!! Thank you ! now I finally get it :D
It was great explanation, Thanks!!!
Thank you, thank you, thank you!!!:) You are awesome!!!
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
Very good explanation. Thank you sir
Great - as always 🙂
just what I needed ...Thanks a lot sir :)
Awesome, thank you
Great and well explained
I mean, for real, me head just exploded, I thought I had understood this before, NOW I really understand it 😄
Tanks ! It's really good :)
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.
It is really great work :)
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.
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
very good. Thanks.
Thanks. Congrats.
Amazing!
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. 😀
thanks that help a lot
Life saver!
Legend whom not many knows
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.
Thank you thank you thank youuuuuuuuuu
Thank you...
thank you
So good! The visual representation really helps newbies. Thank you
you sooo gud !!!
thankyou :)
Good use of Sketch to explain it. What colour theme for VSCode are you using? It is a good one.
Default Dark+
the bestttttt
merci vraiment je devenais fou carrement
I just love you
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.
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.
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.
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.
neat
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.
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.
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.
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.
makes it even harder to understand for me
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..
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.
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.
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.
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.
so does this mean the 'extends' and 'setPrototypeOf' are just doing the same thing?
yep. th-cam.com/video/XoQKXDWbL1M/w-d-xo.html
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?
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])
}
i like his voice :f
its like he's wooing me
Sub, you are great !
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!
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!
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.
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.
Knowlage is good for the soul...
and the wallet XD
On me! 😂💸
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 - th-cam.com/video/GhJTy5-X3kA/w-d-xo.html
Can you please Visually explain other topics such as nodejs streams!
Thanks
I will definitely make more videos with sketches in the future.
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.
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.