Check out a free preview of the full The Hard Parts of Object Oriented JavaScript course
The "Recap of the class Keyword" Lesson is part of the full, The Hard Parts of Object Oriented JavaScript course featured in this preview video. Here's what you'd learn in this lesson:
Will explains how classes in JavaScript are much different than in true OOP languages, and ties the previous sections into the next section of the course.
Transcript from the "Recap of the class Keyword" Lesson
[00:00:00]
>> Will Sentance: We were talking about our solution before that was just a prettifying, a cleaning up of the sticking out function that creates our objects. And those objects need to combine all the data of user 1 or user 20, that is name Eva score 9, with all of the functionality that's gonna be applied.
[00:00:23]
So that user object, so we're not off on a hunt every time, as we're writing our code, to say okay, we want to have the user's score increase at this moment. Where's the increase score functionality? I can't even use it. No, no, don't worry. There it is on the right-hand side.
[00:00:37]
It's not on the object, though, cuz that'd be a disaster, copies on every single object. You've got 1,000 users, 1,000 copies of the increment function complete.
>> Will Sentance: Memorarily inefficient, no, complete and efficient in terms of memory. And so we put them all in one place, all those shared functions in one place, and then use this proto bond, JavaScript's prototypal nature, to go and know that at the moment of the interpreter looks for a function and doesn't find it, doesn't give up.
[00:01:08]
Goes and looks up there. Now, we then made some refinements. That is, we said, let's not do the whole process of creating that object manually. Let's use a new keyword that's gonna do all that inside automatically for us. Well, that also restricts a little bit where we're gonna put the functions.
[00:01:23]
So we put them in there now. In that function that creates the object dot prototype, which is an object where we put all the functions. Then we said, man, rather than putting them in there manually, which to me does not feel that much work and actually feels kind of explicit and clear.
[00:01:37]
Well, other languages kind of give us, other languages let us combine methods with the function that creates the object that has access to those methods all in one construct known as a class. But they are not implementing under the hood the same way. So, it's debatable whether it's a positive step to wrap all this up, because while Java Script fundamentally is not a traditionally object-oriented language, it is a prototypal language, cuz it's faking it.
[00:02:12]
Under the hood it's doing this stuff. And I promise you if any of you use Java or C++, any of these languages, their implementation of classes in object-oriented design is not this under the hood. It's something quite different. Who knows what, I don't know. But I know it's different, so it is maybe debatable.
[00:02:29]
That's why we're building up a true understanding of how, otherwise we just go straight to this. If you were in another language you'd go straight to solution four, because there is nothing under the hood on that. It is what it is. But here, solution four is a mask for a bunch of under the hood that we need to understand to properly use solution four.
[00:02:51]
Okay, here we go. So solution for, mode is the new standard, feels more like the style of other languages like Python Java. But nobody knows how it's working under the hood. If solution three folk didn't know, but at least they saw the prototype word, now nobody knows. But we do.
[00:03:11]
>> Speaker 2: [LAUGH]
>> Will Sentance: All right, so you will not be one of those folk, you will be the special ones who know. Now that proto reference, that little proto properties are, that refers to other objects. JavaScript decides, that allows us to give an object like user1 or user20, bonus functionality that's not on the object itself.
[00:03:35]
Whereas that increment function is not on the object itself, it's bonus. Well actually, in JavaScript, all objects, and by the way, functions remember are also objects, so objects are functions. And by the way arrays are definitely just objects with property zero, one, two, three. Those are the keys that allow us to go and access things in arrays as though they are arrays.
[00:04:03]
They're not actually under the hood sort of lists in the conventional sense of the language. They're just objects. They all actually get a bunch of bonus functionality by default. That is to say they all, all objects have a hidden underscore product underscore property, that links off to a store of functions.
[00:04:24]
Let's see this play out, but it's gonna give you the preview, see that has own property, I'm not sure that's on. So where the hell's it coming from? Now you may just think, well I don't know, JavaScript. Well, actually, it's pretty explicit, it's gonna follow this proto-path. All right.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops