JavaScript 'this' driving me nuts

Question

I frequently use Visualize to figure out scope, function call sites, and all, while I advance my JS learning escalade. Recently I bumped into this:

function foo() {
    console.log( this.a );
}

var a = 2;

function bar() {
    var a = 5;
    foo();
};

bar();

Google Chrome gives me a 2 in the console, while I was expecting a 5 (foo's call site). Interesting enough, pythongtutor (under JS, of course) gives me an error message of undefined, as seen below:

I have two questions:

Why the outcome is 2 and not 5 since, calling site for foo is within bar where a is 5.
Why is pythontutor flagging and error?

@Xufox `this` refers to the context that was set during the function call (either explicitly or implicitly). It has no connection to where the function was defined. — zerkms, Oct 28 '17 at 11:12
Ok, pythontutor must be under strict mode. That's all. But the first question still applies. — Fernando Soares, Oct 28 '17 at 11:16
@FernandoSoares because `var a = 5;` is a local variable. Local variables never available through property access of any object. — zerkms, Oct 28 '17 at 11:18
"Context" is an object, not the whole "scope". It literally is some object. — zerkms, Oct 28 '17 at 11:20
@Xufox, check Kyle Simpson's YDNJS - this & Object Prototypes. You are mistaken. — Fernando Soares, Oct 28 '17 at 11:23
@Xufox: `this` doesn't refer to scope, nor does it relate to where the function is defined. — T.J. Crowder, Oct 28 '17 at 11:24

T.J. Crowder · Answer 1 · 2017-10-28T11:30:59.267

1) Why the outcome is 2 and not 5 since, calling site for foo is within bar where a is 5.

The site of a call has no effect whatsoever on this in JavaScript. How you call the function and how that function is defined (e.g., is it a bound function, an arrow function, or just a plain function or method) are all that matters.

2) Why is pythontutor flaggin and error?

Because in strict mode, it would be an error.

When you do:

foo();

...you're not setting any explicit this for the call. If foo is a plain function (and yours is), that means that in loose mode, this will refer to the global object during the call to foo, and see the global object's a property on this.a (and the global a's value is 2). In strict mode, this will be undefined, so this.a is an error (trying to read a from undefined).

Separately, the a local variable in bar isn't accessible as a property of any object.*

How does the “this” keyword work?

* Gory details: Conceptually at a specification level, it's a binding held in the variable environment record (notionally an object) for the execution context of the call to bar (also notionally an object), but that's conceptual. We can't access environment record objects or execution context objects from code, and in a given implementation, they may not literally exist.

@zerkms: I thought I'd made that clear by contrast: Not bound or arrow. — T.J. Crowder, Oct 28 '17 at 11:14
Right, that's what I thought as well. It's unfortunate there is no a dedicated name for it :-( — zerkms, Oct 28 '17 at 11:14
@zerkms: Yeah. I reworded slightly to make that bit clearer. I've heard "plain", "normal", and I've uncreatively used "`function` function" (but that doesn't really make sense, as methods aren't declared with `function` but are "plain" in this regard...sigh!). — T.J. Crowder, Oct 28 '17 at 11:17

JavaScript 'this' driving me nuts

1 Answers1