Advanced JS Fundamentals to jQuery & Pure DOM Scripting Exercise 4: Solution
Transcript from the "Exercise 4: Solution" Lesson
>> Alexis Abril: These are meant to be difficult. Like we said earlier, they're really base or fundamental concepts, but they're intentionally hard, but hopefully when you leave today, it will be with a more fundamental understand, a stronger fundamental understanding of what we're going through. So let's go through this exercise here.
[00:00:20] Let's build up the new keyword together. So, we go over to our new keyword, I wanna blow this down a bit. Okay, so what we did first is a really, really good first step. I do this a lot is verbalized, what are the things we need to do?
[00:00:42] These, remember the four things we need to do? What do we need to do for this to work?
>> Speaker 2: Create a new-
>> Alexis Abril: Create a new object. Got it, what's the next thing?
>> Speaker 3: Set the proto to constructor prototype.
>> Alexis Abril: Yeah, set proto to constructor prototype. Set whose proto?
>> Speaker 3: The objects.
>> Alexis Abril: New objects, proto searches prototype. Then what do we need to do?
>> Speaker 4: Call online.
>> Alexis Abril: Mm-hm. Invoke our constructor with anything special?
>> Speaker 5: Our new object.
>> Alexis Abril: Our new object as context. And then what's the final thing we need to do?
>> Speaker 3: Return.
>> Alexis Abril: Return.
[00:01:36] Return our new object. These are the essential points that our new keywords are gonna do. So, let's create a new object. Var o equals curly brace, boom. Step one complete. Next, we wanna set the proto so we know where to look for things. We're gonna say o.proto to constructors prototype, so, constructor.prototype, awesome.
[00:02:06] Then we need to invoke our constructor, but we need to set the context to our new object. So we're going to say constructor., we can use call and apply because these are the methods we can use to invoke a function, but set context we specify. I'm going to use apply because it matches up nicely with our signature here.
[00:02:25] We have an array of arguments, and apply takes an array of arguments. Some would say o, args, and then return our new objects. Save this. Let's go back for a test page, and our new keyword test is now passing. Now, two of you have stumbled upon this, and I want to talk about this a little bit, too, is what happens?
[00:02:55] I'm gonna go to another test page here. We have a person. Let me copy this up here and let's discuss. So, here's our constructor. So, in our constructor, what happens if you ever return value? In this scenario, what does the new keyword actually do?
>> Speaker 6: It returns foo.
>> Alexis Abril: Returns foo? Any other thoughts?
>> Alexis Abril: This is a little bit of a weird edge case, it will return foo. If you're actually for primitive strings, do you know at the top of your heads if this will actually return foo? There's a really weird condition, or a set of conditions, not weird.
[00:03:59] But there is a specific set of conditions.
>> Speaker 7: I think for me there are, it still returns the object.
>> Alexis Abril: It'll still return the object for persons? There's a few conditions here. If, so here, I'm gonna actually say, if we were actually doing the true implementation, we would say something like return value to be very verbose.
[00:04:21] And then we would pass return value through a little set of conditions, if the return value is this condition, then return it. If it's not that condition, then return our new object. But this is the case where if there's a return value, we need to check what it is if it's a new object.
[00:04:37] If it itself is an object, we will definitely return that object. Not our new object. Whatever object is returned from our constructor. So if we did something like this.
>> Alexis Abril: Foo bar, this will definitely return foo colon bar. It'll forget all the things we set up with proto chaining, all that's out the window.
[00:04:59] It's just gonna return this object. So, be wary if you're setting up constructor functions. Even if using the new keyword, if there's a return value, this will likely overwrite it. Okay. So that is our new keyword, there's couple things in addition here. Really quickly. So, in summary, new keyword is new create a new object, set the proto of that object to the prototype of our constructor.
[00:05:33] It's going to invoke the constructor with our new object as context, and this can return the new object we've created. It seems like a lot to remember, this is really, really important when you're constructing your own applications. You're creating new objects in new instances of things all the time a lot of times when you probably don't even realize it, and then talk, we're going to go back to earlier today we said, what would be a case where you want to check if this is the window or not, and the new key word sets this.
[00:06:08] There's a very popular case where you create a new instance of things and you don't even realize it, necessarily. Okay, in memory, very simple example, we have our dog constructor function. This is going to, why would you assign, so with a question online, are you handling these Justin?
[00:06:35] Gotcha. Sorry. No, no, no, I missed it. I just saw the last one. Why do you assign the proto property? The question is why do you sign the proto property and not to the prototype property? Okay, so again, this is a good way to remember this. One, well, there's two things to remember here, one, the proto property itself is special.
[00:06:59] When you're looking for a method or property on an object, if it's not there, it knows to walk up the proto chain. Not the prototype chain.
>> Speaker 7: By it, you mean the .operator.
>> Alexis Abril: I'm sorry, the .operator. Thank you. The .operator will walk up approaching, it's not gonna walk up any prototype chain or any other property chains.
[00:07:21] It's just proto, that's treated special. So when we assign that, it's a very explicit path that we wanna go down. Yes, you could set the prototype property, but it'll do nothing. Okay, so I have a very simple example here, var dog equals functions as our constructor. This is what it's gonna set up in memory for us.
[00:07:49] We're gonna have dog, which is a pointer to a function in memory, and remember, functions have prototypes, this prototype will be just a new object. And then we're going to say pup equals new dog, we're using the new keyword and invoking our constructor. We're going to have a pointer called pup, it's going to point to a new object, whose proto property is going to point to our prototype of dog prototype of our constructor.
[00:08:20] At a very simple level, this is what the new keyword does for us.