Check out a free preview of the full Deep JavaScript Foundations course:
The "Binding Confusion" Lesson is part of the full, Deep JavaScript Foundations course featured in this preview video. Here's what you'd learn in this lesson:

Kyle demonstrates that attempting to force the "this" keyword into a different lexical scope can lead to some binding confusion.

Get Unlimited Access Now

Transcript from the "Binding Confusion" Lesson

[00:00:00]
>> Kyle Simpson: So there are four rules for how did this keyword works in JavaScript. It is not dependent in any way, shape or form on where the function was written, or where the function is called from or any of that stuff. There is only one thing that determines, given a this aware function like the one on line one, foo is this aware cause it has a this keyword in it.

[00:00:21] Given that function, there's only one way to answer what is that this keyword gonna point at? And that is to say, how was the function called? Doesn't matter where it was written, doesn't matter where it was called from. Doesn't matter what's around it. The only thing that matters is how the function was called.

[00:00:40] And I'm gonna say that over and over and over again, the only thing that matters is how the function was called. That's counter intuitive, which is why I have to say, the only thing that matters is how the function was called. In our example here, you'll notice on line nine, I call the function, it looks like a plain old normal function call, because it is a plain old normal function call.

[00:01:03] That's one of four actually different ways for a function to be called, just as a plain old normal function call. And in the set of rules for determining what do these keyword points at, this is actually the fourth and final rule. So I'm going in reverse order here, it's the default binding.

[00:01:23] Because there's no other rule that will apply to that call sign, to that call of that function, the fourth and final default rule kicks in, and the default rule says this; if a function doesn't match any of those other rules, the default is a non-strict mode default of this keyword to the global object.

[00:01:42] So that's why in this code which is not strict mode, when we call foo, it makes to this keyword be the global object which is why we promote bar1. Because it looks like global.bar on line two, and it finds the global variable bar from line five, had this code been in strict mode, the default stays undefined.

[00:02:05] So, we would have basically tried to do undefined.bar on line 2 which would have thrown an error. So, you ask yourself, why does strict mode make that an error? And the answer to that question is, because it's almost always a mistake to have a this aware function that you call like line nine.

[00:02:25] You never wanna call a this-aware function looking like line 9. And if you do, and it accidentally points at the global object, that is almost certainly a bug in your program. That you're accidentally referring indirectly to the global object and changing or accessing global properties. Because that's almost certainly a bug or a problem, that's why they decided to make it undefined so it literally threw an error for you.

[00:02:55]
>> Kyle Simpson: So the first rule that we learned, line nine is the default binding rule, cuz no other rule applies. It kicks in in non-strict mode it defaults to global. In strict mode, defaults to undefined. The second of our this binding rule says, if there is a call site, if the function is called and at the call site there is a context object.

[00:03:20] Like we see on line ten. I say o2.foo on line ten. It's the same function. You'll notice that that comes to us from line six. On line six I borrow a reference to the foo function and set that reference directly on o2. By borrowing that reference I can now make the call site look like line 10, and I can implicitly say, call foo in the context of 02.

[00:03:49] So, the implicit binding rule says call the foo function, set its this keyword equal to the context object. So, that's why we get bar 2, and if I borrow the function again on line 7, and then call it using that bar load reference on line 11, we get bar3.

[00:04:10] That's the implicit binding rule. So that's actually two of our four rules in one slide. That was pretty easy.
>> Kyle Simpson: Of all four rules, the most important one for you to get is this implicit binding rule. You have to be able to look at a call site like line 10 or line 11 and immediately know, that function is gonna get called whether this equal to that object that shows up in front of it.

[00:04:39] You just gotta drill that into your brain because we're gonna use that over and over and over again the rest of today.