Object Oriented JavaScript Tutorial #10 - Prototype
Вставка
- Опубліковано 18 жов 2024
- Hey gang, in this object oriented JavaScript video, we'll be looking at the prototype object and how we can use it to give our objects methods.
🐱💻 Course Links:
VS Code editor - code.visualstu...
GitHub repository (course files) - github.com/iam...
JavaScript for Beginners - • JavaScript Tutorial Fo...
🤑 Donate @ www.paypal.me/...
🎓Find me on Udemy @ www.udemy.com/...
👾 Video thumbnail artwork by PixelSwish @ / @designable
![[UA] NAVI vs MOUZ | BO5 | IEM Rio 2024](http://i.ytimg.com/vi/CMBYk0cbGoA/mqdefault.jpg)
I watched like 6 other videos and read a bunch of articles and still didn't understood why prototypes existed. This was the first video that made sense to me. Thank you!
After so many tutorials and online courses I've finally understand the OOJ especially prototypes! Which means, the netninja is the best teacher on UA-cam!
Thank you very much!
Thanks so much :)
@@NetNinja Hi, i would like to ask for your advice. I and my team need to do an assignment that simulates the Scrum framework and follow a BCE model, the goal is to create a simple application (can be a pc, web or mobile application) through an OOP(or OOP-related) language and my team chose javascript. My questions are, would you recommend using Javascript for this and if so, is it better to use classes or prototype for our BCE model requirement?
I teach coding and today's subject was the 'this' keyword along with 'new' and how prototypes work and I came here to get a refresher... I am just going to get my student to subscribe to your channel instead lol
students must have been like REEEFUUUUNNNDDDDDDDD haha
@@sushantregmi2126 YES lol what a day.
I finally understand why prototypes exist and when to use them. I've spend an hour detouring from my Udemy course trying to understand this. Thank you!
Prototypes have been so hard for me to understand and then I watched this video, the concept seemed so easy to grasp. Thank you.
I gotta admit this was very enlightening. I am planning on creating my own course for javascript one day as teaching has always been fulfilling to me. I studied for over a year, then went through a coding boot camp, and came out of it totally lost on using react because I couldn't understand OOP or how classes worked, and this short course totally made it all sensible. I will be saving the whole playlist for reference. So Javascript basically isn't even a class-style OOP language, it's a prototype-style programming language that throws the word class in without actually providing any extra functionality I can think of aside from prettier looking code. I almost fail to see the benefit of adding the class keyword. It actually feels like it's harder to understand for newcomers because you go and try to learn about "class based OOP" when you're actually using prototyping, it's misleading as far as learning goes.
EXACTLY MY THOUGHTS. We invest so much time learning Class based JavaScript only in the end to learn that all that class stuff is just syntactic sugar and nothing more. This becomes counter productive if we learn about class stuff first and then learn about prototypes. Because now we are forced to unlearn the way of thought we taught ourselves. We now need to think in terms of prototypes when already have formed a class based thinking process.
Amazing. Ive been struggling to understand the significance of prototypes, you explained it very clearly!!
i am so used to not getting shit but every time you are like "do you understand" im like wtf yes i understand perfectly u r the man
Why should we use prototype instead of just including the function within the User function as that also worked? What are the advantages of doing this?
By using prototype property on the constructor function, Prototype will enable us to easily define methods to all instances of the instances while saving memory. What's great is that the method will be applied to the prototype of the object, so it is only stored in the memory once, because objects coming from the same constructor point to one common prototype object. In addition to that, all instances of userOne or userTwo will have access to that method. Thus, we will be able to save quite a good amount of memory compared to the constructor approach. Apart from low memory usage, the prototype approach is obviously faster in execution when creating new object instances since no time is spent on re-declaring any methods. [Yes, I read this somewhere and copied]. And btw, thanks for asking such an important question, Good day.
@@MZ-jb9hi Thank you for answering my question Mohammed. I appreciate it. Have a great day.
@@MZ-jb9hi Great work. Thanks for the help
@@jamesdaniels2255 can you please reply to my comment?
@@shameekagarwal4872 which comment?
This man right here is the best teacher I've ever met on this platform
I completed Cold Steele's MASSIVE Web Dev Bootcamp not too long ago, it was an awesome course. Learned a lot. But damn it Shaun, my next course will be with you. You rock!
Thanks! This cleared it up.
Wait, are you using capslock to capitalize single letters?!
Brilliant work, brilliant explanations. Thank you very much
Great job explaining prototypes. So easy so simple. Fantastic work
I just love the way you explain .... so easy to understand!
Glad you think so :) thanks for watching!
Best tutorial channel ever on UA-cam! Thank you so much!
Wow, this is awesome! Thanks Ninja
filled in a few gaps in knowledge for me, thanks!
Please do more on javascript programmings..
I have struggled with this for quite a while ,...thanks a lot...!
Pretty clear! Thank you very much!
Thanks for watching Ahmed!
Thank you very much for this video :) It was very clear and educational!
Excellent! ty so much Ninja
Really helpful for understanding PROTOTYPES in best practical way 👍
wow amazing video thank you lots of help compared to the other videos out there
Brilliant. Absolute beautiful. Thanks a million.
very nice explanation.
Thanks Ninja
you are my new guru man. thank you so much!
Great video, man!
One question:
Why can't we use arrow functions when defining methods using the prototype property?
because if we use arrow function then this keyword will refer to the global window object and not the empty object that is created by the new object (hope this helps)
@@grasplearning4597 Thanks, Pankaj
Two simultaneously notification ~ ninja videos.
Thanks bro
Thanks mate for your explanations from France 🇫🇷 !
this was beautifully explained, thank you much for this.
thank you so much for this clear explanation so helpful
very precise and understandable explanations. Thank you
Great video man.
The one thing about this series that bugs me is the LOCK icon flashing on screen every time you toggle Shift (or caps?). Maybe next time try to not have that?
I really liked your teaching way and the video! Thanks
Thanks for your easy-to-understand explanation. One question though: function User( ) defines a function which takes two arguments email and name. Why does it not return an object?
Brilliant explanation
My friend this was a beautiful explanation and it helped me so much!
Good explanation. Thanks 👍
Starting @ 4:48, you began to show how to access the prototype and, thereafter, I tried following along. However, in the console, I get "undefined has logged on".
You explain well! Thanks
Is it fair to say that adding methods to the prototype of a constructor instead of directly on the constructor also has an advantage of more efficient memory use (that method only stored once and referred through the prototype chain, instead of being created in every instance)? If so - can you add that on the video as well? Thank you - this playlist has been so helpful!
Great tutorial, thank you very much!
I have one question: why don't you create an object for the User.prototype like User.prototype = { login(){...}, logout(){...}} ?
I know this was a while ago, but I was wondering if this was accurate. Basically we're storing methods inside of the proto because if we have a bunch of objects we don't want to have the same method on all of them. This would take up a lot of memory. This is why we store the methods inside the proto property, using the prototype.
Yes, this is what I got
Well explanation thank you!
Glad it was helpful! :)
Excellent explanation
very clearly ! thank you !
I noticed that you didn't talk about "super()" and static methods.
Also, you didn't talk about the fact that, by default, the constructor of a class is by default object (maybe I'm wrong, but I'm pretty sure having seeing that).
For the rest, you pretty well explain what we need to know about the real structure of class.
Thanks.
Great lessons, but just would like to address a little concern. In previous tutorials it was easy to follow your explanation when I could always see your mouse cursor.
In this tutorial series cursor is invisible when you are in code editor and that makes it harder to follow your lecture.
Ps. Not trying to be picky.... great lessons overall. (But the cursor is very important)
I hope you know you mean a lot to us❤
Thank you for everything...
Thank you for your support Selva :)
Thanks a lot nice explanation, it's clear for me now :D
Excellent description
very well explained
Thanks, that means a lot :)
Thank you this was so helpful
Very helpful! 🔥
Glad to hear! :)
Basically prototype functions are emulated static class functions?
Please do a video about getter and setter
Great vid! I’m just confused about one thing. In the video on methods, writing a method inside a class put that method on said classes __proto__ object. Does this mean that attaching methods directly onto a prototype should only be done in the case of a constructor function like in this vid?
I see. So when you run a login function on an instance of an object, that instance doesn't contain the login function but there is a reference to it. So when you run that function, it goes looks to the original object's prototype chain to find that function and then runs it. I guess this saves memory?
Do you recommend using the Class keyword or this method?
Brilliant!
Thanks for watching!
Maybe a dump question, but things may have changed over time.
How do you export the proto functions in a modul type?
I tried almost everything
Awesome!!!
tysm mate!
Really excellent!
Prototype methods == "static" methods (static like in Java)?
You are the best!
than you very much
Thank you
Awesome
when should i use prototype instead of a class?
thank you
Better way to define custom prototype:
User.prototype = {
login(){
this.online = true;
console.log(this.email, 'has logged in');
},
logout(){
this.online = false;
console.log(this.email, 'has logged out');
}
}
But why is it better than the other this one seems complex imo
Salut le Monde :)
Merci beaucoup ;)
The best !!
Excellent explanation! Thank you!
You didn't explain the most important parts: What is the difference between __proto__ and prototype? What is the so-called 'prototype chain'?
thanks
Wait why you still have this.online = false; in the Function User when you already copied it to the User.prototype? is that suppose to be there still?
Is the prototype method static and that is why it is written like that?
Even a variable has a prototype. All in JS is an Object with a type.
What theme r u using
my Atom editor won't accept prototype.login and when typing name.login( ) will return "Login is not a function!"
but if I choose instead prototype.logon or prototype.logwhatever it goes just fine. Meh
Why we cannot use 'arrow function' on creating prototype? anyone?
i try to use like this but, but seem like they don't recognize 'this' keyword? (return undefined)
User.prototype.login = () => {
this.online = true;
console.log(this.email, 'has logged in');
}
Arrow function provide a lexical this.
Juraj Pecháč what?? i didn't quite understand, can you elaborate more on that
dmitripavlutin.com/when-not-to-use-arrow-functions-in-javascript/
Juraj Pecháč thanks for that. i see that 'this' are still refer to 'window' object when using 'arrow function', that why i get 'undefined'
I think its like static method I guess?
bro whats your theme?
hey guys . dont modify the prototype. that is built for built-in javascript features not you
why does your __proto__ have a __proto__?
Can someone help me please understand something ?
I understud inheritance,classes/constructors.
But whith I have problem is prototype and the functions. I understud that prototype is some kind of methodology what we can create and append, ok and we create the method outside function of User object. And same for not always repeat the method in our object User. But What I not understand is the function and class/constructor difference. Its like that we can not use prototype for class User ,for that reason we use function User ( .., .. ){ } ? We can use only prototype method for function object ? And if I'm right can someone please help me and show me some example where We can use class User and we have inside made greeting() method, and after outside we will want create prototype on class User like User, prototype.logout ... If its even possible?
Thank your guys (ninjas )
What is "instances "?
Why does prototype have it's own prototype?
Gold
is [[prototype]] = __proto__ ??? someone pls ans this
could we put:
user.__proto__.login = function(){...}
?
Yes, technically you can, but as far as I can tell, accessing the __ and _ methods and properties is a kind of tabu among the programmers.
And the __proto__ itself became a part of the ECMA standard in about ES6 or maybe a bit earlier, so before it was just like console.log(.error) - not standartised.
Also I forgot to mention in my console log, it does not show that there is a __proto__ property
#programming
Prototype 'propty'
Hi i have finished your OOP please if you know of any start ups that can use a rockie i would like to join. I am Nelson From nairobi Kenya
bro you have andela you can in join it ,
sitll so confused about the countless ways to just make a frickin object. here you just havea function... no constrcutor keyword. then what about constructor functions? all so confusing
does this example use constructor functions?