ES6 class Keyword

[00:00:00]
>> Will Sentance: We are writing, folk, our increment function, our login function which we know I use the one is gonna have access to through the proto reference. We are declaring them separately from the function that when code gives us that object into user one that has access to those shared functions.

[00:00:22]
So what? It doesn't matter, it's fine. But in other languages, you can do those first two parts, the function that they call it constructs the object, the userCreator function here. And the methods, the functions that will be available on that constructed object, not directly but indirectly through the proto reference.

[00:00:44]
You can do this assignment, all bundled in one go. David, what's the construct that lets us bundle this assignment in one go?
>> David: Class.
>> Will Sentance: It's called a class. So now, JavaScript says, no, no, no. I wanna mask even more, I feel so ashamed of my underlying prototype or nature.

[00:01:02]
I'm gonna mask even more, and I'm gonna allow you to rename what is clearly a function object combo with a prototype property, a class. And I'm gonna allow you to not even have to manually go usercreator.prototype.increment as a function. But instead, just literally list off any functions, and JavaScript's gonna take care of putting them into this prototype object.

[00:01:29]
So I'm just gonna list, I'm just gonna say, and by the way, I'm gonna give this function, the one that constructs the object, I'm gonna give it a subtitle. I don't know why, but I'm gonna give it a subtitle, constructor.
>> Will Sentance: And I declare that bit first, inside the class structure.

[00:01:44]
And then I'm gonna list off any functions, any and all functions that I want stuck in this object here. I don't even have to say, put them in the prototype. JavaScript's so ashamed of it's prototypal nature, but look. All right, we're writing our shared methods separately from our object constructor itself, the one that creates the object, right?

[00:02:04]
We call user constructor, we don't run this bit, we run the function bit. Well, that constructs an object into user1. We're writing the constructor bit separately. Other languages do this all in one place, year 2015, that's a two sub two. When you get to subclassing, I like this, here, I feel it's a little bit masking the truth.

[00:02:28]
Let's see it side by side. Here it is. So there's our solution three, which we're now quite familiar with. UserCreator function is declared. It automatically gets an object attached to it. Which we have a prototype problem automatically. It's in there that we put any functions that we want the returned object from calling userCreator [SOUND] to have access to.

[00:02:53]
Cool it again using 20. It will have access to and we put them in there using that notation stick him in an object. Solution 4 says save yourself doing that. I'm gonna do it for you. So it's JavaScript. I'm going to grab any functions that you list inside of this new construct known as a class.

[00:03:20]
Any functions you list, I'm gonna grab them, and I'm gonna put them in there. But now you're not gonna put them manually there yourself I'll put them there for you. Why can't we do it ourselves, who knows, who knows? Actually, once I gave this talk, someone's like please stop criticizing classes, they're very important best practices.

[00:03:42]
So we'll see classes make our lives much, much easier, especially in sub-classing. But it is a facade, it is a fake. If you know other languages that are actually classical object oriented in their nature, traditional object-oriented languages, they are not, under the hood, putting methods in a prototype object, believe me.

[00:04:02]
But that's exactly what we're doing here. So we rename the function bit of the function-object combo, we rename it constructor. But that just means grab that bit, and put it in the function bit of the function object combo. And then any functions which we were manually putting in the object bit of the function object combo in the prototype object well they're just listed off.

[00:04:26]
We really need to put the word function. I think we can technically put semi-colons after them, and that works but we don't put a comma, we just list them off. And they'll all be grabbed one-by-one as we go, when we declare the class these bits are done immediately.

[00:04:41]
They're not called, they're just saved immediately. We grab the first bit just like we do over here, store it as a function. It immediately gets a prototype property on its object version, and then we grab these functions and then we put them in that prototype object. I know I'm repeating myself here a bit, but it really is just so astonishingly identical.

[00:05:00]
We just now rename the function object combo a clause, and we wrap it as such. All right folks, I'm not gonna walk through this right hand side here. We're gonna see it much more in subclassing, so do not fear. We will see it. Take a look at this, it what's in syntactic sugar, that means nothing has changed under the hood.

[00:05:22]
Now we'll say this, when it comes to subclassing, classes implements in things under the hood quite differently, but there's nothing changed side by side. When I call userCreator, now I call the function just as I did before, but now it's gonna subtitle constructor, but it's not changed. When I call increment I look for it on user1.

[00:05:47]
It's not there. I reckon the proto I look up to user-created.prototype where it is. Nothing's changed. Those increment log in, look at it it's sitting there. They're not just sitting there, they were grabbed and stuck in that prototype object. Line 1, declare class. Class it comprises a function and object.

[00:06:08]
Line 2, put the function bit which knows it's exactly the same as a previous function. Put it in and give it the subtitle constructor. When you call userCreator, run this bit, it's the same. Grab increment, put in the userCreator.prototype, put it in. Grab login, put it in userCreator.prototype login.

[00:06:30]
Everyone see these are absolutely identical under the hood. Okay, I'm leaving at that for now. And then after the break, after lunch, we will build out a full clause diagram out from scratch. But we will do it in a more interesting setting of using that to generate, or to be this sort o, to save us doing some work of creating, what I think it was kind of sub types of users.

[00:06:58]
So we've got our uses here, after lunch we're going to see, well hold on, what if I want to have users, user 1, user 20, user 3, but also paid users? Paid users are gonna be a lot like regular users, but they're going to have some bonus properties and some bonus functionality that's only applicable to them.

[00:07:15]
Well, when we build those users, paid users, we're gonna probably wanna use some of the previous work that we did to build users. And that is known as subclassing, and there this new syntactic sugar of the class does make our lives much cleaner. But also masks even more of what's happening under the hood.

[00:07:36]
But we are gonna understand it all.