This course has been updated! We now recommend you take the Deep JavaScript Foundations, v3 course.
Transcript from the "The new keyword" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Kyle Simpson: All right, so we have learned three of our four rules. Let's go to the fourth of our four rules. Again, I'm gonna have to ask you to set aside any preconceptions that you have about what the new key word means. Because many of you, especially those of you coming from other programming languages, are accustomed to the new keyword having something to do with instatiating classes.
[00:00:26] And what I will tell you is that B Java Script does not have classes regardless of what you've been told and B, the new keyword has absolutely nothing to do with instantiation classes regardless of what you've been told. So, you've got to set all those preconceptions aside. I promise we'll come back to the class topic.
[00:00:42] That's our next big thing that we'll spend time on today. We'll come back to that, but right now we'll just have to set that aside and let me explain to you what the new key word actually does. Okay? When we put the new keyword in front of any function call, it magically turns that function call into what you might call a constructor call, still has nothing to do with classes.
[00:01:05] But it turns a function call into what the spec might refer to as a constructor call. And so what we see here is that the new keyword put in front of any function, the function isn't a constructor function, it's that a function call becomes a constructor call when a new keyword is stuck in front of it.
[00:01:22] So essentially you can put the new keyword in front of any function that you ever have in your whole language, and it will act as a constructor call. Okay? So it's a modification to the way the function is being called. When we put the new keyword in front of that function call It's going to do four things.
[00:01:38] And if you're in the process of writing down notes, because I don't have these explicitly in a slide, this is something you would want to write some notes on. There are four things that occur when the new keyword is put in front of a function call. The first thing that occurs.
[00:01:49] A brand new object. A brand new empty object will be created out of thin air. Just poof, creates it out of thin air. That's the first thing. The second thing; you're going to want to put an asterisk next to this item, because I'm going to say what it is, but it's not going to make sense.
[00:02:05] And I'm going to have to come back later, and explain to you what the second item is. The second thing that occurs to our brand new, poof, out of thin air object, is that object gets linked to a different object. And, again, what is that linkage? What is that all about?
[00:02:20] You're just gonna have to hold off and I'm gonna have to explain it later, cuz we're gonna come back to it, okay. But that's the second thing that occurs, is our poof brand new object, it's linked somewhere. The third thing that occurs, this is important to our discussion, that brand new poof object gets bound as the this keyword for the purposes of that function call.
[00:02:41] And the fourth thing that occurs when a new keyword put in front a function call, is that if that function does not otherwise return anything, then it will implicitly insert between lines three and four, like at line three and a half, it will implicitly insert a return this.
[00:03:00] So that brand-new poof object will be implicitly returned for us, from the purposes of the call. What this should mean to you is you could take any function, I don't care what the function does. It doesn't even have to reference a this keyword. Take any old function in your program and put the new keyword in front of it, and you have hijacked that function call as the constructor call.
[00:03:21] It will also do all the stuff that it's supposed to do. But, in addition to doing all the stuff that it's normally supposed to do, it will also do those four things that I just said. Just by virtue of you putting the new key word in front of it.
[00:03:34] Okay? So it's kind of this side channel, create an object, link him, implicitly bind him, and send then send him back to me. Ok? So we see that here. When I do new foo I'm going to create a new object out of thin air, then linkage will ignore.
[00:03:50] It's going to pass it in as a this. When I say this I have a brand new object I can add a property to it. I can say on line two object out baz and I can add a string to it. In fact when I do this console statement, I'm asking for this.bar.
[00:04:04] There is no this.bar because it was a brand new MT object. So we're going to get undefined printed here, and at the moment, the bass variable exists but it has no value so we're going to print undefined again. So this console statement's undefined undefined on purpose, but the final thing that occurs.
[00:04:23] Is that there's an implicitly return this, so that newly created object gets assigned back to our baz variable. If you were to try this code by clicking the code me icon in the bottom left, and I encourage you to do so, you could make your own line 8, that you could say then say baz.baz, and you'll see this string value as it was assigned on line 2 cuz you got the object back and he has a property on it.
[00:04:50]
>> Kyle Simpson: That's the fourth and final way that if this keyword gets bound, it can be bound to a brand new object that it was created as part of a constructor called hi-jacking. Questions about the new binding? Now I've been mentioning to you all along as we've been going there were four roles.
[00:05:11] Now we have the four roles. And I mentioned to you that there was actually an order of precedence. Because depending on how construct things, you could have a call sight that might match two or three different rules at the same time. So which one takes precedence? Which one is the most important rule?
[00:05:28] Let me present to you in order the four questions to ask about your this keyword. These are the four things that you should write down on a post it note, and stick that on your monitor next to the post it note that has your password, and you will never be concerned again about how the this binding works.
[00:05:42] Because it's very simple. You find the call site, you ask these questions in order. Okay? The first question, I'm sorry, I forgot. This code proves the order of precedence. I'm not gonna belabor it. You can go back if you want. You can try the code yourself. You can type this kinda stuff in if you want.
[00:05:58] It will prove the precedence to you, but I won't belabor it, cuz I'm just gonna tell you what the precedence is. First rule, was the function called with the new keyword? If so, use that object. That means that the new keyword is able to overwrite any of the other rules, because it's the most precedent of the rules.
[00:06:17] That could be a surprising result, which I'll explain here in just a moment. Second rule. If there wasn't a new keyword, the second rule. Was it called with call or apply? Was there an explicit binding? If so, use that object. Third rule. Was it implicit binding role. Was there an owning or containing context object at the call site.
[00:06:35] If so use that object. And fourth and final, we default to the global object except in strict mode, in which we default to the undefined value.
>> Kyle Simpson: These four rules in order now let me show you a surprising result. At least is was surprising to me. Remember how we talked about hardbound functions?
[00:06:56] Hardbound functions were basically a variation of the explicit binding rule. Remember we wrapped the function around it, and we put some special stuff into it to make sure that it would be forcibly calling a particular disk. Where does that fall in the order of precedence? Any guesses where the hard binding rule falls?
[00:07:14]
>> Speaker 1: Number two.
>> Kyle Simpson: At number two. Which means that the new key word is even able to override hard binding, subtle but weird point. Which I can prove by going back here, I won't explain how the code works, but there is a trick here and you can see the evidence of the trick right here, inside of the polyfil for it.
[00:07:34] It's checking to figure out if the this keyword came as the result of a new call or not and if so it uses an otherwise it uses what you pre bound.
>> Kyle Simpson: It took me about three hours to figure out how that code works, so I don't have time to go over it now, but you'll just have to take my word for it.
[00:07:57] All right, so those are our four rules in order of precedence, learn those rules, remember those rules. That's all you ever need to know and you have no more excuses for ever being confused about the this keyword again. Find the call site, ask those four rules.