Advanced JS Fundamentals to jQuery & Pure DOM Scripting What is “this”?

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Alexis: Let's talk about one of my favorite things to talk about, which is context specifically, the this keyword. I like talking about this, cuz I speak from a personal experience of pain and learning what context is, and how it works in JavaScript. Originally, I came from a C Sharp background through Ruby, so this, this, not this, or both, was one of the most confusing concepts.

[00:00:32] So, we're gonna talk about what that actually means, but first, while we gauge the room, feel free if you're watching online to respond to this. We're going through some little audible exercises. Here's a very simple scenario, we have a dog object. Dog has a couple properties as bark count, which is just gonna be zero, and bark, which is a function.

[00:00:57] Inside this function, we're gonna say this .barkCount and we're going to increment it. So, when we invoke this function, what is this? The this key word. What is it going to point to?
>> Speaker 2: Dog.
>> Alexis: Dog? How many people say dog? If you're online, feel free to type in a dog, or not dog.

[00:01:20] They would say they think anything other than dog.
>> Speaker 2: [COUGH]
>> Speaker 3: No.
>> Alexis: No. All right. It is dog. In this case, this will point to our dog object. We're going to get into how this works here in a second. Let's change this up slightly. We have the same dog object, but instead of calling dog.bark directly, we're going to create like an alias to it.

[00:01:48] We're gonna say var bark equals dog.bark, and then we're going to invoke that same function. In this scenario, what do you think this points to?
>> Speaker 2: Bark.
>> Alexis: Points to bark. All right. Anybody else? Any other thoughts? Good points to Kevin.
>> Alexis: Right on. [LAUGH] Anybody? Brave enough to take a stab?

[00:02:22] It's okay, this is a safe place. Feel free. The video will be sent to your supervisors, so be careful with your answers. In this scenario, this is going to point to the window that may not be what we expect. It's very similar code than what we had prior.

[00:02:46] Let's observe a constructor type of function. We have a person function, it can take a name as an argument. And we're gonna set that argument to the name property of this, and this slide to overuse this word, what do you think this points to?
>> Alexis: Points to that?

[00:03:14] Did somebody say that? That's clever. I don't think I've heard that before. What does it point to?
>> Speaker 4: The function object.
>> Alexis: The function object. What do you mean, the actual capital F function, or?
>> Speaker 4: Well, I was just thinking on the [COUGH] the memory space. Tag and grab the name.

[00:03:37] Point it over to that FN.
>> Speaker 2: [CROSSTALK]
>> Alexis: Okay, this points to? All right. Few people say P, any other person, like capital P person. Okay, right on. It is, in this case, it will point to p, little p. The instance of our person. This is weird, I know, don't worry, we're gonna circle back to this.

[00:04:09] Okay, let's change that, we're gonna use that same code. We're just gonna take out the new keyword. In this case, we're gonna invoke the same function. We're gonna say var p equals person, Justin Meyer, as opposed to a new person in this scenario. What do you think that this key word refers to or points to rather?

[00:04:35]
>> Speaker 2: Window?
>> Alexis: Window, window? Any other brave souls?
>> Speaker 2: Person.
>> Alexis: Person? Right on. In this case, it will be the window. Okay. We're going to do one more, I think one more example. This one's a little bit out there. How many people have seen the methods call and apply?

[00:05:01] Well, let me rephrase. How many of you have not seen the methods call and apply? No, never heard of this. Okay, this is going to be fun. Call and apply is a really, really cool, bring it to the really gritty details of what these do. Really cool methods to just invoke other methods.

[00:05:17] It's a way to invoke other methods. We'll talk about the behaviors. Here we have our dog objects. First, but we're also gonna have a cat object defined. And cat will have a bark count of zero, because cats don't bark. So, cat will have a bark count of zero.

[00:05:34] Then for those that have seen the call apply methods, we have a dog.bark.call. Cat with a one. In this scenario, what do you think that this keyword will be? If you haven't seen call and apply, don't necessarily get hung up on this too much, because this probably looks really weird.

[00:05:55]
>> Speaker 2: Cat.
>> Alexis: Cat? In this case, it is cat. So, how many people are really comfortable with all the slides we just did, yeah, that makes sense to me? Is anybody just, this is easy? Nobody? Okay. There's actually, we're gonna make it really easy. There's a really simple set of rules that all of those slides actually followed.

[00:06:23] But it's not what we would expect, especially if you're from a classically trained, in a statically typed language. I say classically, I mean class-based statically typed language. If you're coming from that kind of background, this is gonna be really really weird to you. But this has about four simple rules.

[00:06:39] One is the call operator. Actually, I'm going to come back to that one last. The dot call. If you have an object on the left side of the dot, specifically, the .call is the dot operator with an invoked method and invoke function. So, puppy.bark. If you're using .call, this will be set to the object that's on the left side of the dots.

[00:07:06] In this case, puppy.
>> Speaker 2: [COUGH]
>> Alexis: So if you have object.method or object, you know your function that you're calling, that object will be your context, inside that function. You have the new keyword. New keyword, you say var puppy equals new dog. If you're invoking a function like a constructor, if your using new keyword in front of it, the context will be the new object that you're creating and returning in this function.

[00:07:34] So in this case, new dog will create a new instance of a dog, a puppy, for example. So the context within your constructor will be puppy
>> Alexis: And finally, you have call and apply. Call and apply both do exactly the same thing, but in JavaScript, if you're familiar with term method overloading, in JavaScript, we don't have a method overloading, it's just whatever's last wins.

[00:07:59] So, you had to call, if you have something with two different signatures that do the same thing, you have to call them two different names, call and apply do the same exact same thing. I'll talk about the signatures here in a second. But what they do is invoke a function with a context that you specify.

[00:08:17] Saying, I want to use this function, and this inside of it will be whatever the first argument is. Now, the signatures for call will be context, argument one, so. That number one will be the first argument that gets passed into the bark function. So call will be context, argument one, argument two, argument three.

[00:08:43] Apply will be exactly the same thing, except it'll be context, array of arguments. Two different signatures that do exactly the same thing. A really succinct way to think about this is in JavaScript, functions don't know where they live. And this is the hardest part to really grasp if you're coming from a statically type language.

[00:09:08] In JavaScript, functions don't know where they live. They only know how they are called. If you're in C sharp or Java, and you have a method on the class, the function does know where it lives. This will always point to the instance of that class, but in JavaScript, up until now, I'm not going to talk about the class and up and coming.

[00:09:32] Up until now, there is no concept of classes. This will only point to one of these three rules. If none of these three rules apply, it will point to the window or the global, whatever the global object is, a node. It's not window, it's something else. But in a browser, it will point to window if it does not meet one of those three rules.

[00:09:55] Does that make sense? Okay. I know that was a lot of. Yes?
>> Speaker 5: The succinct way I always say it is it doesn't matter how function is defined, it only matters how a function is called. What matters is what this is gonna be.
>> Alexis: Yeah.
>> Speaker 5: How a function is called is the most important part, to be honest.

[00:10:21]
>> Alexis: Only.
>> Speaker 5: Yes.
>> [INAUDIBLE]
>> Alexis: We're talking about
>> Alexis: Yes?
>> Speaker 6: Somebody is asking why do we need both call and apply? And then they also just want you to run through these again.
>> Alexis: Sure, okay. So, call and apply goes back to the method overloading. They do exactly the same thing.

[00:10:40] Let me show you. Let me just write it out. So, if we wanted to do dog.bark as the method, is the function that we want to call, that we want to invoke, I'm gonna stop using the same word over and over. Let's say our dog equals an object, bark is some function, and maybe bark takes account of how many times we want our dog to bark.

[00:11:12]
>> Speaker 4: You used a semi colon there.
>> Alexis: Sorry. Thank you. We can invoke this with a context that we specify two ways. We can say cat, I wanna bark once, or dog.bark.applycat1. These two will do exactly the same thing. It's the signatures that matter. Because if you're writing something in C sharp, you could say call, I'm gonna write C sharp if it was in JavaScript syntax.

[00:11:49] Forgive me. You could say function int count, and then right after that, you could say call function array counters, something like this. You can't do any of this in JavaScript, one will just overwrite the other, you can't have the same property twice in JavaScript. So, no method overloading, because of that, you just have to give it a different name.

[00:12:21] That's really the only reason why they have two different names, but they do exactly the same thing, just different signatures.
>> Speaker 7: What is the different between, so there's call and apply, and there's bind. How is bind different than call and apply?
>> [SOUND]
>> Alexis: Are you talking about?

[00:12:40]
>> Speaker 7: No, [INAUDIBLE] it was prototype.bind function prototype-
>> Alexis: Do you wanna?
>> Speaker 4: When we implement jQueries proxy, which does the same thing, you'll probably fully understand what that does.
>> Alexis: All right. Was there another question online?
>> Speaker 6: I think we're cut up.
>> Alexis: We're cut up? Cool.
>> Speaker 5: Just running through all the-

[00:13:07]
>> Alexis: Let's do the rules, that's what the other one Okay.
>> Alexis: So, we have the base rule, which is if none of the other three rules apply, if no rule is followed, it's gonna the window. So, if you're just invoking a function by default, it will be the window.

[00:13:25] If you're using .callobject dot some function. It will be the object. So, puppy.bark. This will be puppy, the new keyword, the new keyword will set the context for us to whatever newly created object we have. So if we say new dog, this will create a new object in memory.

[00:13:48] And we're gonna reference it. We're gonna point puppy to that, but inside that function, this will point to our newly created object as well. So, puppy in essence at the end of day. Then we have call and apply. This is where we can invoke a method, but hijack it if you wanna think of it that way.

[00:14:06] We can take the method and say I will invoke this function, but with a context that I specify, I like the fact that dogs can bark, and I wanna make my cat bark. You can do that kind of stuff in JavaScript. And this is gonna become really, really handy, not because you can make cats bark, but because we can take some really, really useful methods that we don't want to implement ourselves, but use their functionality for our own purposes.