The "this" keyword: Introduction and Implicit Binding

[00:00] In this video and in a few other videos we're going to be talking all about this-keyword in JavaScript. Admittedly the this-keyword as probably the most misunderstood aspect of JavaScript, so I'm hoping these videos will be able to clear up some things.

[00:11] The very first thing to understand when we're talking about this-keyword is really understand what's the purpose of the this-keyword is, or why we even have this-keyword in JavaScript.

[00:20] What the this-keyword allows us to do, is it allows us to reuse functions with different contexts, or in other words it allows us to decide which objects should be focal when invoking a function or a methods. Imagine we had one function, and we had a bunch of objects that had similar properties, we want that function to work throughout all of our objects.

[00:37] In this video and the few other following videos we're going to be breaking down the this-keyword into four rules. The first rule, and the one we'll cover in this video is called implicit binding, and then we'll cover explicit binding, new binding, and the window binding.

[00:53] This sounds like a lot, but I promise, once you get the hang of it, it won't be too bad. The first thing you need to ask yourself whenever you're trying to figure out what the this-keyword is, is this question. Where is this function invoked?

[01:07] Because whenever you're trying to figure out what the this-keyword is, you have to look at when the function was invoked. Not when it was defined, but specifically when it was invoked. Let's say we had a function here called "say-name," that took in a name and then it's going to council that log, "hello," and whatever that name was.

[01:27] If I were to ask you right now what this function is doing, and specifically what is it council.logging his name, you wouldn't know, because you're not going to understand what name is until the function is invoked.

[01:39] It's the exact same idea with the this-keyword. We won't know what the this-keyword is in a function until that function is invoked.

[01:46] Now let's go ahead and look at this very first rule called implicit binding. Implicit binding is the most common rule and it will probably be found in about 80 percent of the used cases when they're trying to figure out what the this-keyword is. That's iwhat we're going to cover first.

[01:57] You had an object called "me," which had a name and it had an age, and this object also has a say-name method on it. Inside of this method we're going to council.log this.name. Now the question is trying to figure out what does the this-keyword inside the say-name function reference as well.

[02:23] Implicit binding says that when you call a function and when the function is invoked, look to the left of the dot, and that is what the this-keyword is going to reference. In this case we have our function invocation. This is the dot. If we look to the left of the .me, so it's as if we did me.name, which is going to give us Tyler. If we log this now, we get Tyler.

[02:51] Let's take this one step further and what if we had a say-name makes sense. This function, what it's going to do is it's going to take in an object. It's going to add a say-name property onto this object or say-name method, and then it's going to do the same thing, council.log, this.name.

[03:14] Now what we can do is if we had...let's make another me-object with a name and an age, and then let's make a you-object with a name and an age.

[03:37] Now if we go ahead and pass both of these objects into our mix in, it's going to go ahead and decorate them with a new say-name property, is if we call me.say-name, and if we call you.say-name, we're going to get two different things.

[03:59] This invocation meets to the left of the dot, and then this function invocation, you is to the left of the dot. And me.name is Tyler and you.name is Joe. Let's see if this works. There we go, Tyler and Joe.

[04:11] Let's go ahead and do one more example. Say we had a person class, and I use that term loosely. We have this function that's going to return us an object. What it's going to return us is an object with the name property, an age property, and again I say-name method.

[04:29] Here if we council that log, this.name. Now, if we create a new instance of this class, let's say Jim. We're going to go ahead and pass and Jim and pass and 42. Now when we call Jim.say-name, you ask yourself, "OK, what is to the left of the dot." Jim is, so it's going to give us Jim.

[04:55] What if we came in here and made this a little bit more complex. What if we came in here and had a new object on this other object that also had a name property, and that also had a say-name property?

[05:10] Then in here we council that log this.name. Now we create Jim, and then we invoke Jim.say-name, but then we invoke Jim.mother.say-name.

[05:24] What do we expect this invocation to give us? If we look, here's the invocation. We look what's to the left of the dot. Here's the dot and it's mother, and does mother have a name property? It does, which is Stacey, so we should expect to see Stacey. There we go.

[05:41] There seems [indecipherable] the easier, and because it is rather straight forward, you're going to find that whenever you get in these situation of trying to figure out what the this-keyword is, the very first thing you should do is look at when the function was invoked, and look if there's anything to the left of the dot, because if there is, that's what this-keyword is referencing.