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!
@DRocksRecords4 жыл бұрын
Yeah each time I stumble on a video he made I feel like someone with confident knowledge is showing something useful. I subscribed too
@machineshouldbe4 жыл бұрын
My head is still spinning, but this breakdown helped me understand how to use classes more. Thank you so much.
@IONYVDFC2 жыл бұрын
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.
@rotrose75314 жыл бұрын
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.
@wick12298 Жыл бұрын
Its actually Prototype, classes don’t exist in JS. Also, this is “this”. And its also an Object
@igoroliveira91464 жыл бұрын
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.
@LR-bc8js Жыл бұрын
Same thing here bro :)
@NourHomsi2 жыл бұрын
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 !!
@Snoo292933 жыл бұрын
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.
@josiahtobas91724 жыл бұрын
Yooooo...been searching for a clear instructional video on this topic, finally found it. Thanks a lot.
@arinamartens68584 жыл бұрын
you are the best! you have nice voice and speech and so good at explaining, thank you
@bulldawg44984 жыл бұрын
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' ...
@SteveGriffith-Prof3ssorSt3v34 жыл бұрын
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.
@LR-bc8js Жыл бұрын
I think in 11:16, the line should be Object.setPrototypeOf(EmployeeP.prototype, PersonP.prototype) instead. Great video! I love it!
@SteveGriffith-Prof3ssorSt3v3 Жыл бұрын
Yes that line was changed in the description and in the code gist.
@gayathrisathyan38924 жыл бұрын
@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
@SteveGriffith-Prof3ssorSt3v34 жыл бұрын
Yeah. I fixed that in my code sample afterwards. I also have a new video that I did to visually explain prototypes - kzbin.info/www/bejne/ZmLNh5p5gJJ7jpY
@gayathrisathyan38924 жыл бұрын
Steve Griffith Awesome Man. Thanks
@JT-mr3db Жыл бұрын
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.
@SteveGriffith-Prof3ssorSt3v3 Жыл бұрын
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.
@kumargaurav44924 жыл бұрын
Thank you! Steve, It's a great tutorial, and your explanation is really great. :-)
@aaaaaab6314 жыл бұрын
Thank you so much. I am not good at english but your explanation is amazing. I can understand whole things. Thank you.
@jholtkort5 жыл бұрын
Thank you for creating this. Very good!
@jcoopsdrums89414 жыл бұрын
Thank you so much, you have helped me sort out the details that were getting mixed up in my head.
@Pareshbpatel Жыл бұрын
JavaScript Classes and Protototypes beautifully explained. Thanks, Steve {2023-08-18}
@michael.knight5 жыл бұрын
Excellent tutorial, thank you.
@Maru-ge6jn4 жыл бұрын
No bs, straight to the point, clear explanations with clear examples. So underrated!
@Claudia-hz4ly3 жыл бұрын
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!
@barungh Жыл бұрын
"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 👍
@sahasrabhujaneuron59755 ай бұрын
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!
@thippanayugesh84144 жыл бұрын
this channel is pure gold.
@ManjunathManja12274 жыл бұрын
And so underrated.
@ahmedelgaidi4 жыл бұрын
thank you it' s a really good one
@westonpetersring4 жыл бұрын
You are a true engineer, thanks man
@manjoujanzen93758 ай бұрын
great way to explain, clear and in a not too fast speed, so the brain can follow. thank you for the great tutorial.
@federicoprat90932 жыл бұрын
my god finally i understand the difference, Thank you man you saved me.
@cuberos74303 жыл бұрын
wuauu !!! You made it very easy . A lot of thanks, Blessings
@FozIrenics3 жыл бұрын
How many times have I watched this video over the last few months? Lost count...
@manishmate99914 жыл бұрын
The beeeeeeeeeeest explanation ever. Thank you so much mate.
@rongliao92554 жыл бұрын
Great tutorial with super clear explanations! Thanks a lot!!
@raymondji10064 жыл бұрын
Hey Steve, thanks for making this video, very helpful! I think there might be a small error at the end, should it be Object.setPrototypeOf(EmployeeP.prototype, PersonP.prototype) instead? See: jsfiddle.net/xnu19ec3/4/ Also may be useful to touch on the difference between __proto__ and Prototype, I found that confusing to understand.
@SteveGriffith-Prof3ssorSt3v34 жыл бұрын
There is a note in the description about that change to line 50. And the code in the Gist has the correct line. I have another video that should help with the difference between prototype and __proto__ kzbin.info/www/bejne/ZmLNh5p5gJJ7jpY
@sergeyd99892 жыл бұрын
Awesome. You made it clear for me, thank you.
@cmefindaname3 жыл бұрын
Gold! Incredible! Thank you!
@anujkumarjha94542 жыл бұрын
hi just wanted to know doesn't it breaks linkage with Function.prototype with EmployeeP ? I guess instead "Object.setPrototypeOf(EmployeeP, PersonP.prototype)" we should use "Object.setPrototypeOf(EmployeeP.prototype, PersonP.prototype)"
@SteveGriffith-Prof3ssorSt3v32 жыл бұрын
That edit is in the description and was changed in the source code in the Gist.
@TraceguyRune5 жыл бұрын
is this new? Back in my day, I don't recall JavaScript having classes, much less the ability to extend a class. This is all very Java like.
@SteveGriffith-Prof3ssorSt3v35 жыл бұрын
The "class" and "extend" keywords are only a few years old. But remember that they aren't really classes. They are not like classes in Java. JavaScript really only has the "this" keyword because Brendan Eich, when he created the language, was told that he had to include it and make JS "look" like that other popular 90s language "Java". Brendan did not want to use "new" or "this" in JavaScript because it doesn't use classes. Originally JS was going to be called LiveScript. JavaScript was a marketing thing. Just remember that it is still only "Java like" on the surface.
@nikhilmalagi95393 жыл бұрын
Line no : 50, The setProtoType should be set on EmployeeP's prototype right? Object.setPrototypeOf(EmployeeFun.prototype,PersonFun.prototype) // extends
@SteveGriffith-Prof3ssorSt3v33 жыл бұрын
The code is updated in the gist and there is a note in the description about this.
@kedarsatwik69382 жыл бұрын
What is role of supee(nm,id)
@maksmephi3 жыл бұрын
Thanks, it is very helpfull)
@GeneraluStelaru Жыл бұрын
Why is Object.setPrototypeOf necessary? EmployeeP already calls PersonP.
@SteveGriffith-Prof3ssorSt3v3 Жыл бұрын
setPrototypeOf is to define the prototype chain. When you create any Object with a constructor function, that function has a prototype object. It is automatically connected with Object.prototype. If you want to define a different prototype chain then you need to connect your own constructor's prototype with the other prototype object, which will then connect with Object.prototype
@sidarjunful3 жыл бұрын
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.
@SteveGriffith-Prof3ssorSt3v33 жыл бұрын
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 - kzbin.info/www/bejne/ZmLNh5p5gJJ7jpY
@longingbydesign3 жыл бұрын
From what I'm reading, the use of Object.setPrototypeOf() is highly discouraged due to massive performance issues. I also miss how this relates to __proto__ in this very example. Last thing I noticed is that doing SuperClass.call(this, params) is called constructor theft in Nicholas Zakas' excellent book "Principles of object-oriented Javascript", and I wonder if there's any alternatives to that.
@SteveGriffith-Prof3ssorSt3v33 жыл бұрын
Yes. Use Object assign or with the class syntax you can use extends
@JoseRios-yr6pc3 жыл бұрын
Thanks a lot! It's much clear now the concept to me
@stackfulldev3 жыл бұрын
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.
@SteveGriffith-Prof3ssorSt3v33 жыл бұрын
Yes. There is a note in the description about that typo. It was fixed in the gist.
@Cav2034 жыл бұрын
why arent we able to call - console.log(mary.getDetails()) if the getDetails function was passed to function EmployeeP ?
@SteveGriffith-Prof3ssorSt3v34 жыл бұрын
You can. As long as you changed line 50 to: Object.setPrototypeOf(EmployeeP.prototype, PersonP.prototype); as mentioned in the description. There was a typo in the video.
@hanenezribi40293 ай бұрын
Grenat tutorial , thanks you
@sonyniktsol24703 жыл бұрын
"vs" sugess that there is any differenc between prototype and class syntax ;/ Give back my 10minutes...
@SteveGriffith-Prof3ssorSt3v33 жыл бұрын
The difference is in the syntax. The point is that it is all prototypes beneath the surface.
@maitran17644 жыл бұрын
At line 47 PersonP.call(this, nm, id) is there any other way to write it using the setPrototypeOf or Object create method? Thank you very much for your tutorial. Amazing as always!
@SteveGriffith-Prof3ssorSt3v34 жыл бұрын
We need to call the PersonP constructor to give us the name and id properties and their values. setPrototypeOf is just creating the prototype chain for inheritance. It is like calling super( ) inside the Class syntax's constructor( ) method.
@shanglee6433 жыл бұрын
Why we don't invoke PersonP function inside PersonP right away instead of using PersonP.call()?
@SteveGriffith-Prof3ssorSt3v33 жыл бұрын
Because call( ) or apply( ) let us indicate what value to use for this inside the PersonP function, not relying on the lexical scope.
3 жыл бұрын
Great Steve. Cristal clear and you make it easy. But, what happens if you create a variable without new (i.e: let Jose = PersonP)?
@SteveGriffith-Prof3ssorSt3v33 жыл бұрын
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.
@josbellquiros70552 жыл бұрын
Why do you need line 50? Where you set prototype? It seems that you can have inheritance just with the PersonP.call line. I imagine I'm missing some inheritance functionality that would be missing but I can't think of it.
@SteveGriffith-Prof3ssorSt3v32 жыл бұрын
There is a note in the description about a change on line 50. The code was changed in the repo too.
@tolstoievski49264 жыл бұрын
I'm still confused between prototype and the hidden property [[Prototype]] that os called by the accessor function __proto__ ?
@SteveGriffith-Prof3ssorSt3v34 жыл бұрын
There are 3 parts to this. 1. The object. 2. The constructor function that made the object. 3. The prototype object. The function (2) can access the prototype object with the `.prototype` keyword. The object (1) can access the prototype object with the dunder-proto keyword. Here is another video I did on the topic - kzbin.info/www/bejne/ZmLNh5p5gJJ7jpY
@Richard.halabi3 жыл бұрын
thanks Steve very helpful.
@gaborlakatos8823 жыл бұрын
What happens when you dont put the 'new' keyword there? Im talking about this: let fred = PersonP()
@SteveGriffith-Prof3ssorSt3v33 жыл бұрын
`new` changes the return value of any function - kzbin.info/www/bejne/f2OmlaWBobWXd7s
@AdrianJDeNiz3 жыл бұрын
Great video very helpful!
@belhadjersamir54134 жыл бұрын
thank you very much ,you are great
@chesterxp5082 жыл бұрын
Another very cool tutorial!
@masaakistephanebenon5474 жыл бұрын
very helpful thanks a lot
@le_Bizarre2 жыл бұрын
Please make the code as few lines as possible, i got scared from the beginning of the video when I saw that the code is larger than the window, so I got away. This is a shame as I liked the voice.
@SteveGriffith-Prof3ssorSt3v32 жыл бұрын
You never learn if you only look at code that appears easy and safe. Learning comes from struggling and making mistakes.
@glenottley2823 Жыл бұрын
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!
@The-cyber-imbiber3 жыл бұрын
To me, it feels like Typescript interfaces and type aliases can do all the things that you would use classes/prototypes to do. I feel like i might be wrong about this. Does anybody know anything about this?
@SteveGriffith-Prof3ssorSt3v33 жыл бұрын
Typescript is a superset of ECMAScript... which is JavaScript. It just has extra support for things like primitive datatypes that are strongly typed, intefaces, enums, an extra scope level, etc. End of the day it still has JS under the hood with prototypes.
@Mona001-01g3 жыл бұрын
You truly deserve a Subscribe. Thank you for breaking down the complexities of a very confusing language!
@aniketbharsakale25613 жыл бұрын
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.
@aminehaine33014 жыл бұрын
very clear, thank's
@p3k1n03 жыл бұрын
After 10 videos on constructors, classes, and prototypes in javascript, finally a video that makes me really understand....thank you.
@JeatBunkie2 жыл бұрын
So happy I found your channel, I could cry! You’re making every subject I was shaky on just make sense!
@gautamjiart2 жыл бұрын
Really good explanation
@seanlynch18412 жыл бұрын
This is fantastic. Are there any advantages of one over the other? Maybe private #variables in classes, for example?
@SteveGriffith-Prof3ssorSt3v32 жыл бұрын
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.
@tolstoievski49264 жыл бұрын
Why are methods of a class Person store in Person.prototype and after that we call these methods not passing by prototype ?
@SteveGriffith-Prof3ssorSt3v34 жыл бұрын
JavaScript automatically walks up the prototype type chain looking for shared methods and properties. kzbin.info/www/bejne/ZmLNh5p5gJJ7jpY
@KeplerEmeritus Жыл бұрын
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?
@SteveGriffith-Prof3ssorSt3v3 Жыл бұрын
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.
@KeplerEmeritus Жыл бұрын
@@SteveGriffith-Prof3ssorSt3v3 Understood! Thanks so much.
@MannyGonzalezReyna11 ай бұрын
Thank you professor.
@arashvincent85193 жыл бұрын
immeditly subscribed
@asdfmovie3616 Жыл бұрын
Brilliant, so concise and easy to understand! Great work! One thing I don't understand is why I"m unable to get details on `employe.getDetails()` unless I set `Object.setPrototypeOf(EmployeeP.prototype, PersonP.prototype)`?
@SteveGriffith-Prof3ssorSt3v3 Жыл бұрын
There are two constructor functions Person Employee Each has a prototype object where shared methods for that object type are stored. The getDetails method is inside the prototype for the Person type. So, if you have an object that is of type Employee, it will not have a getDetails method unless you connect the prototype chain to say that Person.prototype is up the chain from Employee.prototype. kzbin.info/www/bejne/ZmLNh5p5gJJ7jpY
@anupammaurya66243 жыл бұрын
Nice explanation 👍
@millanferende67233 жыл бұрын
Can someone explain please? 10:26 How can he pass 3 arguments (this, nm, id) to a function PersonP, that has only 2 properties (nm, id) ?
@SteveGriffith-Prof3ssorSt3v33 жыл бұрын
kzbin.info/www/bejne/q3PHeWOfd5aJeq8
@millanferende67233 жыл бұрын
@@SteveGriffith-Prof3ssorSt3v3 Thank you so much!
@PankajDas-mw4uq4 жыл бұрын
By using setprototype method, getDetails method of Person's prototype didn't inherited by EmployeeC. So where is the inheritance now? I wrote the same code in my pc but didn't inherited the method by EmployeeC. Plz explain
@SteveGriffith-Prof3ssorSt3v34 жыл бұрын
Did you get type the code that was on the screen or take the updated version from GitHub? If you typed the version on the screen did you read the note in the description about line 50? With that change, you can add this to the end: console.log(mary.getDetails()); and it works fine.
@PankajDas-mw4uq4 жыл бұрын
@@SteveGriffith-Prof3ssorSt3v3 ohhk sir I got it. Thank u
@kresimircosic37533 жыл бұрын
lol insta subbed.
@sandip_bettereveryday3 жыл бұрын
Instead of setPrototypeOf we could have also used Object.ceate() right?
@SteveGriffith-Prof3ssorSt3v33 жыл бұрын
Absolutely. Object.create( ) and Object.assign( ) were intended to replace the setPrototypeOf method.
@sandip_bettereveryday3 жыл бұрын
@@SteveGriffith-Prof3ssorSt3v3 Thanks for taking time out and replying. Your voice is so assuring.
@abdouthiam79812 жыл бұрын
This is so useful I cannot explain how much it made my learning prototype easy
@johnacsyen4 жыл бұрын
Very concise explanation. Better than code bootcamp. Subscribed
@Cientificosdelsoftware3 жыл бұрын
Thank you man, you are very talented to explain those concepts... God bless you!
@Mona001-01g3 жыл бұрын
When to use class syntax and when to use prototype syntax?
@SteveGriffith-Prof3ssorSt3v33 жыл бұрын
It's all prototypes really. So, there is no performance difference. Just a personal choice as long as you understand how the prototypes are created and used.
@ShivamMishra-mn6cs2 жыл бұрын
best explanation
@nigelbrie56933 жыл бұрын
I get back undefined if i replace this with EmployeeP. I don't understand why. @10:06 let EmployeeP = function(nm, id, salary){ PersonP.call(EmployeeP, nm, id); this.salary }
@SteveGriffith-Prof3ssorSt3v33 жыл бұрын
There is a note in the description and in the code gist about a typo on line 50 that needed to be fixed.
@nigelbrie56933 жыл бұрын
@@SteveGriffith-Prof3ssorSt3v3 With the code fix I now get NaN. I'm just confused why I can't substitute "this" for EmployeeP on line 47. Sorry for being noob.
@SteveGriffith-Prof3ssorSt3v33 жыл бұрын
@@nigelbrie5693 Never apologize for learning. Here is another video where I explain about prototype and `this`. kzbin.info/www/bejne/m4iniZqpfsyHfc0 It should help you.
@AlexDudeOriginal3 жыл бұрын
the feel when "this" is "undefined" :D:D:DD: (line 41)
@AlexDudeOriginal3 жыл бұрын
Wow well nevermind there... cant use arrow functions at that point xD
@adirbarak52563 жыл бұрын
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.
@funnyanimalworld75793 жыл бұрын
is there any difference in which one to use? Perhaps one is faster or something like that? Or are they equal ?
@SteveGriffith-Prof3ssorSt3v33 жыл бұрын
Classes are just a syntactic sugar on top of prototypes. They are equal.
@funnyanimalworld75793 жыл бұрын
@@SteveGriffith-Prof3ssorSt3v3 thank you
@B-Billy Жыл бұрын
Prime level content!! You are really good at JS❤🎉
@pinakim113 жыл бұрын
Thank you so much, you explained it really well.
@mpc794 жыл бұрын
Very well explained. I will be hitting subscribe.
@HologramJay3 жыл бұрын
Fantastic explanation. I can always count on this channel to clear things up. Thanks man.
@kranthikumar5215 Жыл бұрын
I have never seen a explanation like this really u r a great teacher sir applauds 🙏
@maniac54113 жыл бұрын
Thanks for such clear, and concise concepts! Keep up the good work :)
@fifilulu4 жыл бұрын
Hi, great and clear video, thank you. What is the best option in pratice, classes or closures? Which offers the best performance?
@SteveGriffith-Prof3ssorSt3v34 жыл бұрын
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.
@fifilulu4 жыл бұрын
@@SteveGriffith-Prof3ssorSt3v3 Thank you for the answer. Sorry, you are right, my question was between classes or prototypes.
@SteveGriffith-Prof3ssorSt3v34 жыл бұрын
@@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
@fifilulu4 жыл бұрын
@@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.
@SteveGriffith-Prof3ssorSt3v34 жыл бұрын
@@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
@muhammadhossam85574 жыл бұрын
one of the best if not the best javascript channels in youtube
@islombekhasanov Жыл бұрын
Perfection
@russellabraham92084 жыл бұрын
Yea one of the nice things about class is its inheritance of scope. Thanks