JavaScript Classes vs Prototypes
ฝัง
- เผยแพร่เมื่อ 21 ก.ค. 2019
- This tutorial discusses the differences in syntax between creating objects in javascript with the class keyword or with the prototype methods.
Examples are given of doing the exact same things with both versions.
It is important to understand that the class syntax is being interpreted as using the prototype syntax and that CLASSES do NOT exist in JavaScript.
Completed Code GIST: gist.github.com/prof3ssorSt3v...
Code Note: line 50 should be
Object.setPrototypeOf(EmployeeP.prototype, PersonP.prototype); //extends
We are setting the prototype of EmployeeP's prototype to link to the prototype of PersonP.
I can probably count on one hand how many truly clear and straight forward youtube coding tutorials I've watched, this is one of em, hitting subscribe!
Yeah each time I stumble on a video he made I feel like someone with confident knowledge is showing something useful. I subscribed too
My head is still spinning, but this breakdown helped me understand how to use classes more. Thank you so much.
Great video! Being an old-school C++ developer, I personally never understood why JavaScript ever needed to borrow the class syntax. One cannot really deny anymore that classes exists in JavaScript, they surely didn't. I prefer the syntax 'prototype' above 'class'. Many early C++ book editors around 1990 had a hard time explaining what a class is all about, almost apologetic for the confusing word choice. A prototype really says what it does, as it shapes how the instantiated object will look like, while a class has nothing to do with classification.
I've been a Javascript programmer for more than 10 years, but suddenly, you opened my mind to a whole new sight to OOP in Javascript !!
I never dreamed I can understand these class things, but after this tutorial, those abstract things go straight into my head without any resistance. legend teacher, as always thank you.
This is exacly what I'm looking for! Now it makes more sense why the syntax in class is constructed in a bit of a weird way. Many thanks!
No bs, straight to the point, clear explanations with clear examples. So underrated!
Steve, you are the ONLY ONE I found online, that explained well enough so I could understand, I always tried to find a relationship (a kind of "translation") between functions and classes and you simply explained it. Perfect video. Thank you very much.
Same thing here bro :)
"It is important to understand that the class syntax is being interpreted as using the prototype syntax and that CLASSES do NOT exist in JavaScript."
Great 👍
such a good tutorial, you don't skip anything and actually understanding what's a class doing and how to simulate it using prototype explains the logic behind it.
So happy I found your channel, I could cry! You’re making every subject I was shaky on just make sense!
Omg! I finally understood prototypes - I have watched three different tutorials and I still did not get that...until I came across this video! Thank you so much!
I can't stress how clear this was. Thanks
great way to explain, clear and in a not too fast speed, so the brain can follow. thank you for the great tutorial.
This is so useful I cannot explain how much it made my learning prototype easy
After 10 videos on constructors, classes, and prototypes in javascript, finally a video that makes me really understand....thank you.
Yooooo...been searching for a clear instructional video on this topic, finally found it. Thanks a lot.
What a clear and insightful video on what can be a very complicated concept! I've saved your 'JavaScript from the start' playlist and will be working my way through, one per day. Thanks Steve for the great education!
Thank you for creating this. Very good!
Fantastic explanation. I can always count on this channel to clear things up. Thanks man.
Excellent tutorial, thank you.
this channel is pure gold.
And so underrated.
The beeeeeeeeeeest explanation ever.
Thank you so much mate.
Great tutorial with super clear explanations! Thanks a lot!!
You are a true engineer, thanks man
Very concise explanation. Better than code bootcamp. Subscribed
You truly deserve a Subscribe. Thank you for breaking down the complexities of a very confusing language!
you are the best! you have nice voice and speech and so good at explaining, thank you
I have never seen a explanation like this really u r a great teacher sir applauds 🙏
Thank you so much, you have helped me sort out the details that were getting mixed up in my head.
one of the best if not the best javascript channels in youtube
Thanks for such clear, and concise concepts! Keep up the good work :)
Another clear explanation - thank you!
Gold! Incredible! Thank you!
This is such a good explanation, thanks mate.
Thank you man, you are very talented to explain those concepts... God bless you!
Awesome. You made it clear for me, thank you.
Spiegazione eccellente, complimenti!
Clear and useful tutorial
Another very cool tutorial!
I think in 11:16, the line should be Object.setPrototypeOf(EmployeeP.prototype, PersonP.prototype) instead.
Great video! I love it!
Yes that line was changed in the description and in the code gist.
Prime level content!! You are really good at JS❤🎉
Thank you! Steve, It's a great tutorial, and your explanation is really great. :-)
Thanks a lot! It's much clear now the concept to me
Thank you so much. I am not good at english but your explanation is amazing. I can understand whole things. Thank you.
VERY NICE..... Easy to understand.
thank you
it' s a really good one
Really good explanation
thanks Steve very helpful.
Thank you so much, you explained it really well.
thanks for this video man. It really helped a lot.
Great explanation on JS classes. Thanks Steve.
I have a new video about classes too - th-cam.com/video/tqBP5ZX8F0c/w-d-xo.html
Great video very helpful!
wuauu !!! You made it very easy . A lot of thanks, Blessings
Thank you professor.
my god finally i understand the difference, Thank you man you saved me.
Very well explained. I will be hitting subscribe.
thank you very much ,you are great
Great explanation. Thanks :)
A lot of libraries use the manual prototype method and there are some neat tricks you can do with it. I first saw this when analysing mongoose code.
There are some challenges if you want to represent this with types in a typescript project, I found using class syntax to be less pain in that regard.
I definitely have things that I do with prototype and then there are some cases - Web Components, extending Events, extending Errors where I will use the class syntax.
Yea one of the nice things about class is its inheritance of scope. Thanks
Nice explanation 👍
very clear, thank's
great video man. Thanks
Nice content, nice explanation, I'm a newbie & I could derive a lot of sense out of this. Helpful & v.much to the point.
Clean clear crisp. And your voice is so cool :p
Cheers keep this great work going.
very helpful thanks a lot
Loved it, pal.
Great explanation!!!
Just discovered your channel, man .. if only you've been around 20 years earlier, I would be a JS master by now :) The thing that confused me for many years is what "this" means depending on the different contexts. I was a AS3 developer for many years, so i was used to the class logic, never understood the "prototype" concept because of that. When "class" was introduced in ES i finally could work the way i was used to. But thats why i've never understood "this". Now, i even think the prototype way of doing things is more logical. And understanding it clears up a ton of other things in JS that puzzled me.
Glad I could help. I loved teaching AS3 in Flash. Having the visual part made it so much easier to explain the Class concept.
I did a video recently on "this" - th-cam.com/video/eWDXgsIgTGk/w-d-xo.html
Thanks, it is very helpfull)
best explanation
JavaScript Classes and Protototypes beautifully explained. Thanks, Steve
{2023-08-18}
Grenat tutorial , thanks you
Thanks it made it clear to me that even if it ends up being the same thing, classes makes it more clear that they are tied together.
I do wonder if one way performs better than the other tho but its probably not that important.
There's no performance difference because both syntaxes create the same objects with the same prototypes
@@SteveGriffith-Prof3ssorSt3v3 nice ok thanks for the reply, have a good day
@@SteveGriffith-Prof3ssorSt3v3 Hi, Steve. Loved the video, thank you. I came here with a burning question that perhaps flew over my head. If they're doing the same thing, then what's the point of the redundant syntax and why chose one syntax over of the other?
@@choppinbrixx4931 Trying to make it more declarative. That's what I got out of it anyway.
Nice tutorial
Thanks man!
I was struggling with 2 things, what a class really is (in JS) & what practical purpose it serves for the work I do.
You have answered that perfectly .. knowing that the class syntax is just syntactic sugar for functions makes my brain happy!
Subscribed.
After making a connection between the EmployeeP object and the prototype of the PersonP using Object.setPrototypeOf() method, a new prototype method(function) is added on the the EmployeeP object (in the line number 51) with the name of employeeInfo. So, my question is that whether this new method (employeeInfo) will be added to the prototype of PersonP or another prototype object of the EmployeeP?
BTW your way of imparting the information (idea) is unmatchable, it's GOLD STANDARD. I will try to teach my students your way.
The new method on line 51 is only being added to the prototype of EmployeeP. With setPrototypeOf on line 50 we are explaining what the next step in the prototype chain will be. If some method is not found inside EmployeeP.prototype then JS will look inside PersonP.prototype.
This video also helps my students - th-cam.com/video/01jVgCK-HX4/w-d-xo.html
As an advanced novice JS coder, I always found 'prototypes' confusing ... Your video makes the case for the class paradigm vice prototype model in my view ... Coming from the Java and Python world, classes and subclasses are the way to go and are more OOP than 'prototypes' ...
They both do the same thing internally. Both syntaxes are working with prototypes. The Class syntax was partly added to make the transition easier for people coming from languages like Java. Partly it was yet another attempt at trying to simplify something that has been a confusing mess for 20 years.
Perfection
immeditly subscribed
Hi Steve, thanks for this video. I came back to this again after refactoring some code into factory functions and away from classes.
My question is: with what you've shown here, will we still encounter the various pitfalls with 'this'? (ie. having to bind explicitly when invoked from another function -- my intuition says yes because this illustrates an alternate syntax for the same end result).
To that end, would you recommend a more functional / composition based approach where factory functions return objects with certain properties and then object types are returned by composing those functions?
Cheers!
With JS I would definitely recommend using a functional / composition approach to building things. Classes in JS are not what you expect from "class" in other languages. It is a nice clean syntax if you are building objects that will have a limited scope and interactions with other object types. However, when architecting anything in JS you need to think in terms of prototypes and composition works better there.
Hi Steve,
I am just starting my career in coding and have to say you are like a god of coding for me. I read blogs, excerpts from books, and what not but the way you explain things is just amazing. I am preparing for the MCSA-70-480 exam as a part of my apprenticeship and these tutorials are so helpful for a beginner like me. Just wanted to know if by any chance do you take personal coding classes or any sort of official coding lessons if somebody is interested in learning from you 1-1? My learning at this point in time is exam based and there are so many things that I come across in practice questions that I just can't understand and hence feel the need for proper mentoring for expedited learning.
I teach students, but only in my program at Algonquin College - www.algonquincollege.com/mediaanddesign/program/mobile-application-design-and-development/
I don't do mentoring or one-on-one tutoring. Just no time for it.
@@SteveGriffith-Prof3ssorSt3v3 Yes, I understand. Wish I had a teacher like yourselves in my uni, your students are so lucky :-)
At 11:13, if you set the prototype of EmployeeP to PersonP.prototype, the EmployeeP.__proto__ becomes the PersonP.prototype, and the EmployeeP.prototype stays the same it was, that's what happens for me at least. Because of that the methods inside PersonP.prototype cannot be called through the objects created by EmployeeP. I don't know if I did something wrong, but to fix that I simply wrote Object.setPrototypeOf(EmployeeP.prototype, PersonP.prototype), so now the prototype object of EmployeeP function is a child of the prototype object of PersonP function, I think that's how the prototype chain for classes is too.
awaome man ❤
Thanks
Thank you very much!
@steve griffith : Hello Steve. This is really Awesome. By far the best Explanation ever. All your Videos are Awesome. Keep Rocking. A Small Clarification, I feel it has to be Object.setPrototypeOf(EmployeeP.prototype, PersonP.prototype). [ You have written EmployeeP. This causes an error and I'm not able to call getDetails Function from the Base Class. ] Please do correct me if I'm wrong. Thanks
Yeah. I fixed that in my code sample afterwards. I also have a new video that I did to visually explain prototypes - th-cam.com/video/01jVgCK-HX4/w-d-xo.html
Steve Griffith Awesome Man. Thanks
Awesome video! I have a question regarding the number of functions that can be extended. For instance, EmployeeP extends PersoneP1 and PersoneP2.
You can create a prototype chain that is any length that you need. However, each object's constructor function can only have one prototype. The prototype will be one step in the prototype chain.
If you are asking about combining the properties and methods of a bunch of different objects into a single new object, then you are talking about composition instead of inheritance. th-cam.com/video/fbpXQ0e8Mp8/w-d-xo.html
How many times have I watched this video over the last few months? Lost count...
It should be:
Object.setPrototypeOf(EmployeeP.prototype, PersonP.protoype)
With code shown in video, you're effectively attaching the employeeInfo() method to PersonP prototype, meaning even PersonP instances would have that method after that point.
Yes. There is a note in the description about that typo. It was fixed in the gist.
super
Hi, great and clear video, thank you. What is the best option in pratice, classes or closures? Which offers the best performance?
In JS, classes and closures are two different things.
closures in JS are a built-in feature that allows you to maintain reference to a value that would otherwise have been lost, so that you can use it at a later time. Closures will be used both with objects and prototypes as well as with simple functions and loops.
JS classes are a syntactic sugar that lets you define/create Objects and their prototypes with a simplified syntax.
As far as performance between classes and older Object.create syntax, there is no real difference. They both create a JS object and a prototype.
@@SteveGriffith-Prof3ssorSt3v3 Thank you for the answer. Sorry, you are right, my question was between classes or prototypes.
@@fifilulu ok. Well the answer is the same. Classes are just syntactic sugar. They create the exact same prototypes behind the scenes . No difference in performance because they are the same thing
@@SteveGriffith-Prof3ssorSt3v3 Interesting, I noticed that most experienced JS developers prefer prototypes. I concluded it was faster, but it is probably because classes have been lately added to the language.
@@fifilulu you will see a lot more of the class syntax when working with React developers. More experienced developers will be more likely to use the older syntax, like you said the class syntax is newer
is there any difference in which one to use? Perhaps one is faster or something like that? Or are they equal ?
Classes are just a syntactic sugar on top of prototypes. They are equal.
@@SteveGriffith-Prof3ssorSt3v3 thank you
Thank you so much for the very concise information. Sometimes I see projects on Github mixing these techniques (Especially Node.js projects). Why is that? Is there some advantage to mixing these or using one or the other?
Classes are just syntactic sugar for prototypes. In the latest updates to classes there are a couple unique things. But for the most part it is a developer preference on how to write the code. Sometimes it will depend on what else they are doing in the code and if it is more functional or more object oriented.
@@SteveGriffith-Prof3ssorSt3v3 Understood! Thanks so much.
Great Steve.
Cristal clear and you make it easy.
But, what happens if you create a variable without new (i.e: let Jose = PersonP)?
Without the keyword new, any function returns whatever is written after the first return keyword in that function. If the function has no return statement then it returns undefined.
thank u!! React.js not using Class right? they use behind scenes things as u show in the vid?
You can write React JS apps with or without the JavaScript class syntax. A lot of what you do in React will typically be with the class syntax. Just keep in mind that behind everything it is always prototypes, not real classes.
@@SteveGriffith-Prof3ssorSt3v3 thank u! really I got confused with prototypes, I understand it but I can't write my whole app with it.
@@SteveGriffith-Prof3ssorSt3v3 I prefer functional components, therefore... functions.
Hi, Steve good explanation, but I wonder, can PersonC get salary method from Employee as the will have a link between them or it is allowed only for Employee as its prototype is PersonC
Your suggestions???
Thanks in advance!!!
I assume that you are asking about EmployeeC. salary is a property inside of EmployeeC. EmployeeC extends PersonC, which means that the CmployeeC type objects have access to things from inside of PersonC, not the other way around.
@@SteveGriffith-Prof3ssorSt3v3 Ok Employee type have an access to the elements inside PersonC ,but what about opposite version, can PersonC have an access to things inside Employee
This is fantastic. Are there any advantages of one over the other? Maybe private #variables in classes, for example?
It's just two different syntaxes for the same thing.
Real #private variables are available in classes but you can mimic them with proper scoping and prototypes.
Awesome explanation! Now I'm wondering if having the "class" keyword in JS makes things more confusing.
In some ways it does. But if you understand how the prototype system works then you just need to learn how the class keyword works with this. Just don't try to force your understanding of `class` from other languages into JS.
Hey Steve, thanks for the great video. Can you tell me where to call Object.setPrototypeOf in order to apply the inheritance?
I'm showing how to use setPrototypeOf in the video. That is creating the prototypical inheritance. You can also use Object.create( ) or Object.assign( ) to denote a prototype.
If you are talking about with the Class syntax, you can do it the same way. The Class is just syntactic sugar. It is a wrapper around the prototype system. You can add the keyword extends to a class OR you can use Object.setPrototypeOf or Object.assign to point to the prototype.
@@SteveGriffith-Prof3ssorSt3v3 Love your videos. This line didn't work "Object.setPrototypeOf(EmployeeP, PersonP.prototype) " @ 11:20 . It doesn't seems to inherit its parent's method. Could you explain it please? Thx! Here is my codepen: codepen.io/victorw999/pen/KKzZMME
@@victorwong2270 There is a note in the description and in the code Gist that fixes that typo.
@@SteveGriffith-Prof3ssorSt3v3 Thanks for staying active in the comments. I had the same question. Didn't think to look in the description.