JavaScript: The Hard Parts, v3

Public Instance Fields

Will Sentance
Codesmith
JavaScript: The Hard Parts, v3

Lesson Description

The "Public Instance Fields" Lesson is part of the full, JavaScript: The Hard Parts, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Will explains how the class constructor works with the new keyword to create objects. The new keyword creates an empty object, sets its prototype to the class prototype, assigns default properties from a hidden fields property, and then runs the constructor code to add custom properties. Finally, the new object is returned and can access methods via the prototype chain. This process is explicit in JavaScript and important for understanding object creation and inheritance.

Preview

Transcript from the "Public Instance Fields" Lesson

[00:00:00]
>> Will Sentance: So, here we go. We've saved everything in the class. We've done our function constructor that when we run the class, but we're really running the constructor bit in the function object combo, will be called. We've got our increment and login in dot prototype as before, but we now have this new hidden section into which we can put assignments that will be run on every single object creation and assigned to this in the object creation stage.

[00:00:36]
So, let's do this, folk. Here we go, people. We're going down to our using of user creator, our function object combo. Left-hand side, Joe. Actually, Chris, left-hand side, what are we doing, Chris? Welcome back. I know you just sat down. We've got our function object combo here, nothing's changed, we recognize it from before, but we've got some extra stuff on it now. And we declare what on the left-hand side there, Chris, at the bottom?

[00:01:03]
User one. User one. And we do not yet know what to assign to it, so we've got to go and call what, Chris? New. Yeah, exactly. Call the user creator function. Is it anything special? No, it's just a function, people. With what arguments, Chris? Ari and 3. Ari and 3, but we have our all powerful new keyword that is going to do a bunch of stuff inside of our brand new what, Chris? Execution. Execution context.

[00:01:38]
In it we go. Okay, into it we go, people. What's the first thing it does in local memory? Hey, can we all remember, what's the first thing, well, no, the first thing we do in local memory is always we handle our parameter arguments. Tencent, because you've been really helpful with this, can you tell us what the parameter arguments, combos that we're setting up in, or pairings that we're setting up in local memory are?

[00:02:03]
Um, name. Name, and how do I know that? Where did I look in my code to find out what, when I call user creator, meaning I'm treating it as a function, which bit do I run? You look at the, yeah, exactly, exactly, which is still just the function as before, but now we've got a subtitle for it, you know, subname for it, constructor. Exactly. And we see what are our parameters, Tenzin, um, name. Yes, which is going to be assigned what argument?

[00:02:37]
Ari, well done. And the score, which will be 3.3, beautiful. And now our new keyword takes over, and it does a bunch of stuff. First thing it does is it creates a brand new empty object, what label does it get for that empty object, Chris? This, well done, this, and that is an empty object. And then the next thing it does, ah, is set the hidden proto, we're just going to call it proto for now, reference off to where, Chris, this is a difficult one, off to where.

[00:03:16]
There we go, to the prototype object. On the user creator function object combo that was set up with the class keyword. Exactly. And we set that link off. There it is, we make that link, or we don't, the new keyword does. To user creator dot prototype, that is going to be our proto for the object currently stored as this, excellent, okay, now we actually get to do some work ourselves, which is, oh, yeah, now we get to do some work ourselves, no, no we don't, we get to do something else first.

[00:04:04]
JavaScript is going to intercede, what's our new thing, Austin, that our new keyword is going to put onto this object automatically for us, the fields. The first thing we do is we go and look on user creator's hidden property fields. And we go through each of them in there and assign them to the auto-created object. This dot, what was the field thing we filled in here, what was the first logged in, exactly, this dot logged in will be set equal to what?

[00:04:48]
False, exactly, and we get on the object logged in is false. Also done automatically for us with our blue pen, with our new keyword. Done, but now finally, what other people were saying, let's add, let's do our bit. So we do our bit, I'm doing it in white here. This is the stuff that we wrote, and it's to grab the name Ari and attach it to, hopefully we have a property, well we don't yet, so let's add it to this object under the label of this and assign Ari.

[00:05:25]
And then the next one, this dot score is the value of score, the argument is 3, the parameter is score, we create this score and assign the value of score, which is 3. Okay, that was our only bit now that we did ourselves. I mean, it's wild how, and by the way, this is not like implementation detail under the hood. This is stuff that is explicitly in JavaScript using a direct feature of JavaScript, which we can control and manipulate ourselves as we did earlier.

[00:05:49]
Meaning that it's fair game for interviewers and ourselves. Interviewers aren't doing it just to be silly, they're doing it because they know that these are things we need to wrestle with as we write our code. This is fair game because it's stuff that we can manually control directly, as we did earlier. And then finally, the last piece is the new keyword will automatically return the object into user one, where we now have our object with logged in is false, with name is Ari, with score is 3, with our automatically set hidden proto reference up to our object at user creator dot prototype, and our execution context closes.

[00:06:58]
So now, we hit our final line. User one dot login. As always, our only dream, can I run my functionality right on my data to the right-hand side of a dot. Let's test. Chris is smiling wryly because he knows he's up. Chris, where do I look for user one? In global memory. Do I find it? Yes, I do. Where do I look for login first? In user one. I've got logged in, I've got name, I've got score, I added two of those myself, one was added for me by the new keyword that when run on user creator now also grabbed anything that was in the fields hidden property, which we added stuff to when we put logged in equals false in the bit that set this all up, the class construction.

[00:07:43]
And we don't find, well, do we find it in any of those three? No, we do not, so where do we head? Head to the fields, or not to the fields, we don't need to. We head in circles, we're looking for login, the function, where do we head? Prototype, to the prototype, exactly, user proto prototype via the prototype chain through the hidden proto reference where. What do we find increment and what?

[00:08:15]
Log in, log in. So we can grab the function, create a brand new execution context, well done. Exactly, and what's its code? Its code is this dot logged in, and we're going to set it to what? True, we know that in our local memory, that this will be assigned to whatever was to the left of the dot, which everybody is what? User, user one. And so we're doing user one logged in, setting it to true.

[00:08:49]
So we go off to user one. People, if you look at my constructor, I ain't got any logged in property being added to my object manually by me, don't panic. JavaScript automatically added it. When I ran that constructor function, which is just user creator, its function bit, automatically added anything that was saved in fields, which actually, to be fair to Chris, Chris came back after we said this, but logged in is false was saved in this fields hidden property.

[00:09:21]
When we defined this user creator function object combo using the class keyword, and logged in is false was saved in its hidden property fields. We then, when we ran user creator, made sure to grab that and attach it to the object we're about to return out, so our user one does now have a logged in property, which is false, and Chris, we're going to set it to what? True, true. And there it is.

[00:09:49]
People, this is a public instance field. It is available on every new object and every new object will get a copy of that property. Logged in is saved on the fields section, hidden property of the function object combo, known as a created via the class, not known as a class, created via the class. You can perhaps call it a class now, to be added to each object created as logged in is false.

Learn Straight from the Experts Who Shape the Modern Web

  • 250+
    In-depth Courses
  • Industry Leading Experts
  • 24
    Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now