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]
>> Kyle Simpson: Our fourth and final approach to binding of this for a function is to use the new keyword. Now line 7 looks like I'm instantiating a class. I understand that there is a strong precedent that when you use the new keyword, it indicates to people, you're instantiating a class.
[00:00:21] But what I'm just gonna have to tell you and you might not trust me, but I hope you'll just give me a little bit to prove this. The new keyword in JavaScript has absolutely positively nothing to do with creating instances of classes. It is doing something very, very much different that if you squint at it and just pretend, you might call it classes but it really isn't that.
[00:00:47] So this isn't in the slides, but if you've been taking notes, I wanna tell you the four things that the new keyword actually does when we put it in front of a function call. And these notes will be helpful later in our workshop. Four things that happen when the new keyword is put in front of a function call.
[00:01:05] The first is that it creates a brand new empty object out of thin air.
>> Kyle Simpson: The first thing is that a brand new empty object is created out of thin air. The second thing that happens, this one you'd probably want to put an asterisk on cuz it won't make sense.
[00:01:28] That newly created object gets linked to another object.
>> Kyle Simpson: I understand if linking doesn't make any sense yet, we'll come back to it.
>> Kyle Simpson: The third thing that happens, is that newly created object, from step one, gets passed in as the this context to the function call. And the fourth thing that happens is if that function does not already return its own object, the new keyword assumes that you meant to return that object that was passed in.
[00:02:17] So, it implies a return this.
>> Kyle Simpson: Step one, create a brand new empty object out of thin air. Step two, link that object to another object. Step three, pass that object in as to this context. Step four, return that this if something else object wasn't already returned.
>> Kyle Simpson: Now I wanna ask you, in that description of things, cause that comes straight from the spec, all right?
[00:02:46] This isn't me making this stuff up. In that description of things, which entity seems to be doing all the work? Is it the foo function that's doing all the work? Or is it the new keyword that's doing all the work?
>> Speaker 2: New keyword.
>> Kyle Simpson: Cuz it seems like it's the new system, right?
[00:03:03] As a matter of fact, the foo function is almost irrelevant, isn't it? It's almost like the foo function doesn't even really need to be there. It's sort of a side effect. Hold on to that as a mental bookmark, because by the end of today, we're gonna prove to you that the new keyword doesn't even really need a function, it's just a poorly designed system to create these new objects.
[00:03:35] So if we can set aside the thought that this has something to do with classes, the fourth and final way to make a this keyword pointing something, is to use the new keyword to create an object for it to point to. And that doesn't have anything to do with class design, that's just saying, hey, I got this function, I need it to point at something.
[00:03:56] I wanna make a new thing for it to point at, the new keyword can do that for you.
>> Kyle Simpson: That's it, those four rules. Let me summarize those four rules in code for you, and by the way, this is called a constructor call. It's not a constructor function, cuz there really aren't constructor functions, cuz there really aren't classes.
[00:04:24] We just pretend that there's classes. But I refer to this as a constructor call, because it's any old random function with the new keyword put in front of it. That's what a constructor call is. Any general function where you stick the new keyword in front of it, it's a constructor call.
[00:04:45] But all it's really doing is making an object. In code, this is a proof point for the precedence, if you will, for these rules. Because it is possible that one line of code can match multiple rules, imagine for a moment if I said new o.food.bind, that would match three different rules in the same call site, right?
[00:05:19] So if we can match multiple rules to the same call site, we need to know which rule wins. What is the order of precedence? Everybody follow that reasoning? This code proves to you what the order of precedence is, but nobody wants to read code. So let me just summarize for you the order of precedence for these rules.
[00:05:38] This is how you determine what the this keyword points at for any function that has a this keyword, it's these four rules in this order. Number 1, was the function called with the new keyword? If so, use the newly created object. Number 2, if not, was the function called by call() or apply()?
[00:05:59] Was it called explicitly with call() or apply()? If so, use the explicitly provided object as of this context. And as a side note, bind() uses apply() under the covers so it's 2b, it's just a sub-rule of that rule. If not, was is it called with a context object like O2.foo where we borrowed the function?
[00:06:25] If so, use that context object. And fourth and final rule, default to the global object except in script mode where we stay undefined. That's it, those four rules in that order. If you've spent the better part of your JavaScript career being confused by the this keyword, it's just because nobody ever presented to you this list.
[00:06:48] Because now that you have this list, you should never have any confusion whatsoever. It's a very predictable question and answer process to figure out for any given function what's this key we're gonna point out. Just go down the list. Now, I wanna ask you something about the implications of this list.
[00:07:07] What do you think would happen if I put the new keyword in front of a hard bound function? What does this list imply?
>> Speaker 3: That this is the new object?
>> Kyle Simpson: It implies that the new keyword is even able to trump or override a hard binding, and it is.
[00:07:37] It is specially privileged to be able to override that this binding, even a hard bound function. Why you would do that? I don't know, but if you wanted to, you could override even a hard bound function with the new keyword.