Prototypes in JavaScript - FunFunFunction #16

Key Takeaways

I am MPJ and this is fun function. To you new viewers, I do not normally look like this. I just h I'm a bit hung over today, so I just feel like wrapping myself in a hoodie. So, what are prototypes? Let's say that you have food in your software and you um you want to make more kinds of food. You want to make uh waffles. I guess well, if you have waffles, you need no other food. But um let's say you maybe like carrots or something. In that context, food is the prototype of waffles and carrots. Some of you are now thinking, hm, that reminds me of classes. And you would be right because prototypes do remind of classes, but they are not the same thing. So for this video, try to put classes aside and see prototypes as a new thing and not shove prototypes into that part of your brain where you keep your classes because then you will just be confused and unhappy. Anyway, let's create a food object. const food equals uh object literal. We're going to give it an init method. And that init method is going to take a time. H and we're going to assign that type to a property on the current object. And we are going to have an all important eat [Music] method console.log log you ate the dot type. So as you see this is just a completely normal object. It has an init method uh that assigns the type. In fact we're going to do that now. Going to go food.init and we going to have a waffle. And it has the all important eat method that uh logs out you ate the uh this type. Let's let's use that now. Food. And let's run that. Prototypes.js. That's the file. And you ate the waffle. This is fine. But what if we want to create more types of food objects like those carrots? I just realized that I should give you full disclosure here because my teeth might be red. I'm drinking some red wine. Anyway, carrots, this is where object.create comes in. I'm going to delete these two lines here. And I am going to do a new con do waffle. And we're going to do object.reate food. And on this one, we're going to do net. So give it type waffle. And we're going to go waffle eat and run that. You ate the waffle. We're back to where we started. But let's get that carrot into place too. Using const here. Uh const means that you cannot change the variable later. Uh otherwise it's just like let. You should always use const if you don't explicitly need uh the mutability of um of uh of let or var for that matter. You should not use var ever unless you're in some old environment or something. Anyway, uh carrot dot in it. carrot and carrot dot eat. You all know what this will return. You ate the waffle. You ate the carrot. Looking at this example, you might infer that object. creates a copy of the object. Let's see if that is true. Going to move this up a bit. Um, and I'm going to do this [Music] food dot eat plus function console.log log you to eight the dot upper case or two uppercase [Music] right and we're on it what do you think will happen Uh, I will suck and not being able to code. Right. Try again. You totally at the apple and you totally at the carrot. But this is kind of strange. This means that object.create create cannot possibly be creating copies because if it did this food eat would not be affecting the the eat uh methods of waffles and carrots because they should be copies, right? But they do says you totally ate the waffle. The new method signature does affect the um the waffle and carrots even though we assign it to the food object. This is of course because the object.create does not create a copy of the food object. Instead, what it does is that it creates a new empty object for waffle and carrot and it assigns food to be a sort of fallback for those. So whenever we call a method or a property on on a carrot or a waffle uh that doesn't exist on the carrot and the waffle, it will look in its uh prototype object, the food object, and see if it's there. And then if it is, it will use that one. And that is what we mean by waffle and carrot having food as its prototype. So object.create create creates a new object and assigns food as its prototype. But one fallen carrot will only fall back to food if it lacks the property. If it has the property, it will use that. Let me show you what that means. I am going to delete all the carrot stuff from here. Carrot. Carrot. Carrot can delete. And we no longer need this example. Uh, but I am going to add another eat method. And I'm going to clear this. And now we're going to run it just to see what it looks. Um, prototypes.js. You ate a waffle. You ate a waffle. You ate a waffle. You ate. Now let's see what if I do this food dot type. What will he type? He will type. When I run, what do you think will happen? I will give you a golden star if you figure this out before I run it. What do you think? Three, two, one. You knew that one, right? But what if I comment out? They're in it. Let's check it. Node prototypes. Yes. Did you guess correctly? You guessed. You ate the undefined. You ate. So in this first eat call here, waffle will not have a uh anything assigned to the type property. And when it looks in its prototype, the food object, it will not have anything there either. So it's going to return undefined. However, here we assign uh this string to the uh the type property on the food object, which means that when in this second call here, waffle. Well, it won't still won't find any type property on itself because well, that's assigned here in the init function and the init function is commented out. But it will fall back to its food prototype and there it will find the food typeyp stuff and I'll put it here. I also quickly want to mention that you can use prototypes to do type checking. Going to delete this part here and bring back the carrot and uh waffles that we saw before. And now you can actually do food dot is prototype of waffle. We could do food is prototype of 1, two, three, four, five. Some integer and food is prototype of carrot. Some is food. Waffle is food. Wow, this is super exciting. [Music] entertainment and I we're going to do int is food. Do you know what this is going to be? I think you do, right? I think you're anticipating this. Are we running it? No. JS and waffle is food. True. intent is food false and just true. Yeah, we're going to do carrot is food. No. What? Okay. Oh, carrot is food. Clear. Clear. Oh my god, I'm so tired. Right. Carrot. Carrot. Carrot. car is food true. So you see that you can use the food prototype to see if that is used as a prototype uh in different uh different objects and that is an excellent way of doing type checking and that is the basics of prototypes. There really isn't much more to prototypes than that. However, while the concept of the prototype is simple, it does have some very cool implications for the language. So, on the next episode, we're going to explore that a bit. We're going to explore why prototypes are more powerful than classes, and I'm going to show you some cool tricks that you can do with it. Do not miss that episode. As usual, it will be released next Monday morning, 0800 GMT. But if you want more videos like this one right now, you should check out either the composition over inheritance video or the factory functions video. I am MPJ. This is fun function. Until next Monday, stay curious. [Music]