We’ll go through the absolute basics of the prototype in this video. I’m going to explain why you should learn prototypes, and how they work.
Complete series playlist: “Object creation in JavaScript”
https://goo.gl/ELUE4B
You’re probably used to doing inheritance with classes. JavaScript achieves inheritance using prototypes. The real-world analogy used when teaching classes is a blueprint – you have a blueprint of a building, and you use that blueprint to build buildings. The real-world analogy to a prototype is a delegate, a person that has been elected into office that will act on your behalf.
This video is for you if you are coming from another programming language into JavaScript and you’re already somewhat familiar with object oriented programming. You know what classes and inheritance is, but you’re confused about how object orientation is done in JavaScript.
I’m also active on:
• Twitter https://twitter.com/mpjme
• Medium https://medium.com/@mpjme
• Quora https://www.quora.com/profile/Mattias-Petter-Johansson
Original source
48 responses to “Prototype basics – Object Creation in JavaScript P3 – FunFunFunction #46”
YEH LIKE DAGS?
but srsly, great video.
For those who are already convinced about learning Prototype basics , go to 4:51 . You are welcome 🙂
I think it would have been a nice illustration if you also added
prarieDog.talk()
at the end of the exercise.
Thanks for these videos, I really enjoy them.
I loved the part where you said… why don't you marry prototypes. :). Please mpj, i would like to know which softwares you use for your web series. I would like to start a video series soon and I'm looking for some tips.
more talk less info
This a mind bending explanation, "…don't try bend the spoon, instead, think, there is no spoon!"
So what I understand is that prototype is like a asking a project manager to do something that he can't do himself and he says ok, then passes it on to the person that has that skill in his team to get the work done.
9:01
https://youtu.be/YkoelSTUy7A?t=541
I suppose that before you set the cat to have the prototype of animal it already had a prototype which was the global erhm…prototype? And as you pointed out a few seconds before the global prototype doesn't have a talk function. So if you then call the cat.poop() function neither the cat, the animal nor the global prototype will have it. Correct?
5:07 Could? Should? Nice
man! your plant is dying.
cool, very clear and easy: similar to JAVA
ultimately, I watch it because of the JS – not you as a entertainer. So some balance and more effort at explanations, please…
ok, you are fun- but I want MORE JS explanations… more thorough and more clear how / what works!
The analogy of the Delegate has really helped cement in my mind, what the prototype really is. Thank you.
MPJ, How hungover were you in this video?
@10:19 You assign object 'cat' the prototype of another object 'animal'. If only functions have prototypes, I don't understand how it's possible to assign one object, the prototype of another object?
"Why don't you marry that prototype?"
well, actually I did and we're really happy!
why to do that?when
let cat = {sound:'meow', talk:talk}
cat.talk();
copy and paste function and nothing else
It seems like prototypes would be heavier on your processor whereas object inheritance would be heavier on memory usage. Is there any significance with larger objects?
I liked how you compared classes vs. prototypes 🙂 nice video mate, keep rollin' 🙂
Is it better to use Object.setPrototypeOf instead of Object.Create?
thank you! 🙂
Love your stuff I'm a great fan.
At 2:13 that symbol you make actually means "f off" over here in England, but from reading the comments here I'll imagine you do mean that to some people!
nice video but I'd go a bit deeper on best practices and quirks. for instance when a prototype object has a property that points to an object or array
Sorry, my native language is not English, but when I was first learn prototype, I was confused with a word protoss( A race in Starcraft, which is made by a company call Blizzard). My gut tell me that it maybe has some realtionship with it…One day, Ah ha!
If you have played that, you will understand my example:
let's say you choose terrain for example.
ok, you build a factory to generate marines. this factory can be treat as a Object that has marine prototype. and this Object can generate marines. And each marine initilize with a attack and defence properties, and equeals to 1. This is very important for me to understand prototype, Why? Becasue, the properties which the marine has will be upgrade in the future. that's why I using this case for example. During the game, you might want to upgrade the amys attack proterties. When the research complete. All the marines of you amy, will be upgraded, not only for the marines that hasn't created, but also for the marines that has created.
if we don't set the properties on prototype, this will only effected on the marines that will create in the futures, not for created marines. So you will think this is not fair. you should research the attack first, then, create marines…if you do want game to be like this. you just need upgrade the factory marine prototype.
This is the case always in my mind….haha…My life for Aiur!
Great video. Keep up the good work
MPJ, fab video as per usual. You mentioned "setPrototypeOf" is never used in PROD, why is that? Seems handy to me and easier to wrap your head around than the new keyword and the prototype property…
why do you have to type node prototype.js to see the function run?
https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.4r0noknmg
Hello MPJ, you have made some arguments against inheritance in favor of composition. I would like to know if those same arguments apply to prototyping as well. Thank you for your videos, they are very helpful! 🙂
Hey MPJ, great video as usual. However, wouldn't be more interesting to use Object.create instead of Object.setPrototypeOf? "setPrototypeOf is a very slow operation, in every browser and JavaScript engine": https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf. Great fan of your work. Cheers from Brazil.
Do you happen to work for spotify?
being new to js this was a clear way of understanding prototypes still don't get the real world use case especially when using angularjs
thanks for doing this!
It feels like every prototype tutorial online uses the same super basic example, that never really shows the usefulness or real life application of prototypes.
Your delegate analogy was great at the beginning but then it was just 15min of basically repeating the same thing.
I'd really love to see this expanded upon to really show, how and especially when you should use prototypes in real life to make your life easier.
To bring this all together, could you do a vid using prototypes to model the DOM in JS? The examples with traversing up the prototype chain for data makes sense, but the interaction of prototyped functions and instance data isnt.
Great vids. Thx!
Absolutly hillarious presentation! Prototypes are my family for years. So I know them well. Still I am watching your show just because you are so funny and the same time clear and understandable. So your show is nothing new to me but it helps me to explain things much better to my staff and customers!.
MPJ, is that a Nomos Glashuette!? Just when I thought I couldn't love you any more…
Great vid!
Question: Is there a way to console.log prototypes of objects to visualize the prototype chain?
This is really f'd up.
Thanks for including the examples at the very end that show how prototypes differ from classes (cannot change blueprints dynamically!)
So even this tiny little code is unreadable, may be because of this people don't like prototypes, not because they are afraid of something new.
I guess this video and this channel ain't for beginners?
WOOOOOOOOOOF
not a fan of semi-colons? I hope not, me either!
Enlightening, but not your greatest. I hope the time in Brazil is worth it 🙂