Prototype basics - Object Creation in JavaScript P3 - FunFunFunction #46

Key Takeaways

good Monday morning I am mpj and you are watching fun fun function today we are going to go through the absolute basics of prototypes I'm going to explain what prototypes are why you should learn them and how they work this video is for you if you are coming from another uh programming language uh and you're already somewhat familiar with objectoriented programming but you are confused about how to do it uh in JavaScript specifically this video is part of a series on object Creation in JavaScript uh and you will probably be very confused if you start watching the video here instead of the video series from the beginning so you can click in the find a link to a playlist of the full series in the episode description so we're going to talk a little bit about what prototypes are why you should learn them and uh how they work what are prototypes you are probably used to uh doing inheritance with classes in JavaScript we achieve inheritance using prototypes prototypes and classes are different beasts um the real world equivalent to a class uh is a blueprint you have a blueprint of a building and you use that blueprint of a building to create new buildings the real world analogy uh to a prototype uh would probably be a delegate like a person that you vote into office that can vote on your behalf so that when the government needs to make a decision they will ask the delegate instead of going around to uh millions of people and asking what they think because they have delegated that decision to their elected delegate many of you might be thinking why should I learn prototypes because in newer versions of JavaScript there is a class keyword so your knee-jerk reaction might be screw this prototype shite I'll just use classes instead but that kind of reasoning will lead you into trouble for two reasons the first reason is that you're missing out prototypes are is a very simple and Powerful uh inheritance bottle it's it's very nice and the second reason is that the class keyword in JavaScript is just a thin layer around the Prototype it uses the Prototype under the hood you can't really Escape learning about the Prototype if you want to be a solid JavaScript programmer because you will always uh get confused constantly when you see bits and Bobs of the Prototype sticking out of your classes which you will you might ask why did they add a class keyword at all if the Prototype is so powerful why don't you marry the Prototype the reason that classes were added to JavaScript was simply that people are very very used to classes and confused by prototypes and they don't want to learn new stuff prototypes is ironically a simpler concept than classes but it's still very confusing coming into JavaScript if you're very used to the class inheritance model and a lot of people are uncomfortable with learning new things and this group of people that really don't want to learn anything new they they are very strong and very big so classes have been uh implemented in JavaScript on top of the prototype in many different forms which has made the Prototype even weirder and harder to understand because uh whenever you read a an article about uh inheritance in JavaScript there is this weird Frankenstein's monster of the Prototype and the class jumbled together in some ah the fear of learning new and different things is actually so big that uh the class keyword has now actually been shoved into the uh es6 standard I don't necessarily think that is a bad decision if people absolutely positively want to cling on to their classes and use the class inheritance model uh then at least we should give them a standardized way of doing it it's sort of like giving needles to drug addicts and even if you're hell B on using classs in es6 you still need to uh understand the Prototype because it's so ingrained in how uh JavaScript works you simply can't avoid it as with JavaScript in general actually let's just learn to like this thing because it is inevitable it's there we need to accept it okay let's begin with something uh extremely basic uh this is going to be a theme of this series uh we're going to be learning learning really learning the details of the language from the beginning we are going to write a function that makes some noise to the console going to talk uh and it's going to console log uh sound oh sorry sound and I've going to to call uh this variable sound uh let's run that so sound no sorry we have to pass it something I'm very tired uh and we run that node protot js and it says I'm going to do the same thing again but I am going to this time I'm going to do a talk function oh sorry talk and it's going to oh God this sound right and we're going to call the talk this W node dot uh prototypes JS I call it uh the file then and it's going to return undefined uh and this is because this in this case uh is going to be we talked about this in the earlier episode and really watch it if you haven't but I'm going to log this out and just give you a brief recap like this see now that this one is this print statement here and this big ass object over here that's the this object what this is when talk is being executed and it as you see here like you see this set time out here and it's console here and that means that this is the global object and global object it doesn't have a sound property so we're going to assign this talk function to an animal object uh let's call this [Music] animal and the animal is going to get the talk function can send it like this and we are going to [Music] H let's just call animal. talk animal. talk see what that gets us ah all right so if we now check the uh this this uh console log statement here we see that it's actually now this equals the animal uh animal object so it's going to be function talk and the second uh console log statement it's this one it's still undefined because animal as you see doesn't have a uh sound property I have a tripod here this episode is uh I'm a bit stressed out to be honest because I'm prefering for the U Brazil JS uh talk that I have at the end of this week I'm flying to Brazil tomorrow so but either way when we call a function like this when it's a assigned as a property on an object and we we call it like this that means that uh JavaScript will assign the animal as the this context of the talk so whatever is on the left of the dot here will be this when we are executing uh talk by the way uh a new handy feature in necas script 6 is that we can when we have some an assignment like this where uh we're assigning a property uh with the same name as the variable that we're assigning to it we can simply omit this and it this is the same thing so you see like this will be the same uh same thing anyway this is not very useful yet let us uh do a u let's do a a a cat and we are going to uh that is this is finally going to get a sound right it's going to say meow bam and now we are going to do this object set prototype of the cat we want to set that to be animal um before I do that though I'm going to comment it out and just uh do uh try cat. talk bam it's going to give us an error cat. talk is not a function right because you see cat cat does not have a talk function but what if we do this like we move this up before we call cat. talk we set the Prototype of cat to be animal going to run that and now it works it says meow so what just happened uh when we do this when we uh access the talk property here on cat when we do this what JavaScript the JavaScript interpreter is going to do it's going to go here go go and look inside of the cat object literal and it's going to go through it and see like H is there a talk property here no it is not h w where could the talk property be then is the JavaScript uh interpreter wondering and hm it might be in the Prototype it will ask itself it's going to look in the Prototype does cat have a prototype and it will see that we have set the Prototype of cat to be animal so it will walk to the Prototype and see like is there a property called Talk there and there is uhhuh okay then we will call that one and that is what happens so it's going to call that one uh which like you see like the reference goes here and it's going to call this and it's going to reach this line which is logged out here like this object is now going to be the cat so even though there is a prototype chain it's uh sees the animal like the the the this context when calling talk it's still going to be cat it's not going to be animal even though the animal is a prototype it's still like the cat that is the center of attention here that is still going to be this when you call uh property on the cat uh uh cat object uh and that happens to be a function it's still going to be assigning this to be the cat even though the talk method does not really exist on the cat it exists on the uh on the animal uh prototype object I'm just going to show a an another example uh dag dog and I'm going to go sound [Music] woof and we are going to object. set prototype of dog and that's going to have animal and we're going to do dog. talk we're going to I'm going to remove this um line here that logs out to this object and just keep the one logging out this do sound and it got meow woof and you can set up a prototype chain if you want uh if you want multiple levels so let me show you how that works works I can do let dot uh prair dog equals uh maybe how function and I go this do sound to uppercase uh and I do console. log F FK FK and let me uh call that Prairie dog. how this is going to give us an error if I call it correctly uh Bon cannot read property two uppercase of undefined because sound is undefined here and as you see that that is simply because well there is no uh sound on prairie dog but if we before calling how go object set prototype of prairie dog to be dog and run it it's going to go W or something let me delete the cat stuff all about dogs today and it's important to understand that prototypes are delegates they do not create a copy of uh the original animal object or or anything like that dog will actually delegate the Prototype access to the original object so they don't work like classes which creates uh a sort of copy from a blueprint so for instance let's say that I uh if I change after setting the uh prototype of the dog to be animal I go and change animal. talk to be something else like got function called uh console.log I am a little tort and I go node prototype such as and you see that I am a little deot uh and because you see here like dog. talk here even though we set the Prototype up here to the animal object uh and we change it after doing that uh dog will still like when we access this talk property here JavaScript will go uh and we'll see that okay hm there's no talk property on the dog but it looks like the programmer has set the Prototype of dog to be animal so I'm going to go look in animal and okay I'm looking in animal here and here's talk good there's a talk property but we've changed that to be talk here uh so it's not going to go here because this has been reassigned this no longer exists uh it has been garbage collected maybe uh and now it's going to go into here well I am a little teot it's still going to have access to this like for instance this do sound let's run that I am a little teapot I'm using some very convoluted examples here this is absolutely nothing uh at all how you use the prototype in real life but I'm using these examples to try to get you to understand that the Prototype is just a way of saying uh that for this object use this other object as a backup as a delegate as a protype if someone calls my object uh with a property that does not exist on my object go look in this other object that is what the Prototype is set prototype of is pretty much never used in in real applications but I've used it here in order for to try to get you out of the the class mindset that we're creating uh objects using object. Create and new and this and all that that confuses the concept A lot uh like it's just a delegate that we assign to an object this was just the absolute basics of the the Prototype like just showing you at least me trying to show you what the core concept of the Prototype is but either way prototypes are delegates you have watched an episode of fun fun function I release these every Monday morning 0800 GMT time if you have thoughts questions insights about the Prototype check out the comments section below and uh add your comment or help someone else out that is confused I will also try to help you out if none of your fellow viewers are faster I am mpj until next morning I M mpj until next Monday morning stay t [Music]