Q30: Invoking Object Methods Scope

[00:00:00]
>> All right, this is the very last question, but it's JavaScript, what gets logged? Is it A B B, B A A, A undefined B, or B undefined B. All right, the right answer here is B. It's B A A. So first, let's just quickly talk about the this keyword.

[00:00:24]
Well, not fully, but for what matters now. So the this keyword with regular functions, it kind of depends on where the function lives or where it's called. When we just have a function on the global scope, that this keyword will refer to the global scope. But if we have it as a method of an object, as a regular function, that this keyword will refer to the object on which the function is called.

[00:00:48]
So when we have this code block you will see that foo on objA is a regular function, is just a regular method, non-arrow function. So the this keyword here, that should have been objA, [LAUGH] in the first one. Okay, let's not make it more confusing. You know what objA, like that.

[00:01:08]
Because this is a regular function, and this is a method on that object. Then we have foo on objB, which is also a method because it has a reference to a method on objA. But we'll talk more about that later. And then we have bar, which is an arrow function.

[00:01:27]
So this doesn't automatically bind that this keyword to the objB object. Instead, it doesn't own this keyword. So it essentially uses this keyword of its surrounding environments. And in this case, that is objB. This keyword an objB is the global scope. If that makes sense. So for bar within this keyword or within bar that this keyword would have been the global scope or would have referred to the global scope and in baz, which is just a normal method, it refers to objB.

[00:01:59]
Now when it comes to our answer, let's see if I, okay, sorry, my presumed kind of goes weird here. I'll just go back. So, first we're calling objB.foo. And the foo property and objB is only a reference to kind of the function objects on objA, but it's not actually invoking object A's foo method.

[00:02:24]
It's invoking the foo method on objB, cuz we're not actually invoking it with two parentheses. So in that case it's still just a regular function. It has the same reference as that foo on objA, but it's not foo in objA, cuz it's invoked in a different way. So within that one, this refers to objB.

[00:02:44]
And then we have bar, which is an arrow function, but it doesn't matter. All that matters here is that we're invoking the method on objA. We are directly invoking foo with a parenthesis and objA. And since this is a method on the object objA, this keyword in that foo refers to objA, so this type returns A.

[00:03:04]
And then we have baz, which is a regular method. So if we were to log the this keyword within that baz method, it would refer to objB. But that's not what we're doing, we're invoking the foo method on objA. So that's why, again, this also logs A. So yeah, the big difference here is that just referencing or creating a method we're doing here with foo to objectA.foo doesn't invoke the method on objectA.

[00:03:28]
It's just kind of referencing the same function object, but not its invocation, if that makes sense. So the invocation of the function object still happens on objB, and that's where functions get this keyword from. Whenever it creates the execution context for that function, it checks what the this keyword should be.

[00:03:49]
So yeah, that's just something to keep in mind. Regular functions there that this keyword always depends on, where you call it, how you call it, you can add, apply, call, all that stuff. Arrow functions do not have their own this keyword they always inherit it from their outer environment, from their outer scope.

[00:04:06]
Yeah [LAUGH] anyway, that was question 30. Thanks so much.
>> [APPLAUSE]