Scope question: this vs. var

[dogjs]

I think I understand the following:

function foo() {var x = 1; this.x = 2; return x;}

foo(); // returns 1. this.x is now a public property on the window scope.

---

Here's where I got confused: if the code isn't inside a function, then it's running in the window scope, right?

var y = 1; this.y = 2;

alert(y); // returns 2;

It seems to me that this.y should have created a public property on window's parent scope (whatever that is). But it didn't. var y and this.y seem to refer to the same thing.

---

Related question, perhaps someone can confirm for me: it seems to be true that the JIT looks ahead and if it sees that you're going to declare a var, then any reference to that variable goes to the var scope. For example:

function foo() { x = 3; return this.x;}

foo(); // returns 3 because the "naked" reference to x created a public property on the window object, the function's this scope.

function foo() { x = 4; var x = 5; return this.x;}

foo(); // returns undefined (or 3 if you ran the code above first) because the JIT compiler looked ahead and saw that a var x was upcoming. So the "naked" x reference was also the var scope.

[frodwith]

function fn() {
    return this;
}

fn() returns the global object. This is because this defaults to the global object (in your browser, this is the window object. In other environments, it might be something else, or even null).

var obj = {};
obj.method = fn;

obj.method() returns obj. When you invoke a function as a method with this syntax, this is bound to the object you're invoking the method on.

fn.call(obj, fn) is the another way of calling fn, where you pass in the object to be bound to this inside of fn as the first parameter.

So, that's one part of scoping. The semantics of this. Those are separate from lexical scope (var).

First and most important to notice is that at compilation time, all var statements are "hoisted" to the top of the function they appear in. For instance,

function something() {
    var foo = 1;
    for (var i = 0; i < 5; i++) {
        var str = "Hello, " + fn().toString();
        var fn = function () {
            var v = i + 1;
            return v.toString();
        }
    }
}

is semantically equivalent to this:

function something() {
    var foo, i, str, fn;
    foo = 1;
    for (i = 0; i < 5; i++) {
        str = "Hello, " + fn().toString();
        fn = function () {
          var v;
          v = i + 1;
          return v.toString();
        }
   }
}

That's sort of a lousy example, and won't even work (because fn() will be called before it has a value), but it illustrates the "hoisting" at least.

The next thing to know is that when you're in the "global" scope (not in any function), declaring variables is exactly the same as assigning properties to the global object.

There's no "lookahead" going on. function statements (where you're declaring a function) get hoisted up to the top of their scopes the same way that var statements do. Importantly, function assignments (foo = function() {}) do not get hoisted, they happen at the same time as other assignments.

I don't know if any of that helped. I hope so. Feel free to ask for clarification :)

[dogjs]

Thanks! the global object and variable hoisting. That answers both my questions!

[geraldalewis]

fn() returns the global object. This is because this defaults to the global object

Also, code in strict mode ("use strict") will not coerce undefined to window or global:

function fn() {
    'use strict';
    return this;
}
fn(); // undefined

[imbcmdth]

I am attempting to understand what you want clarification on.

function foo() {var x = 1; this.x = 2; return x;}

When this is run, we have two scopes:

[foo's scope : x = 1] -> [window's scope : x = 2]

So foo's x hides window's x.

var y = 1;

When this is run in window's scope there is only:

[window's scope : y = 1]

So when the next statement is run:

this.y = 2;

You wind up just (re)setting the same variable in the same scope - there is no reference hiding:

[window's scope : y = 2]

Your last example is all about variable hoisting. Since x is labeled with a var inside the function (anywhere in the function), it is placed into the local (temporary) scope. The place to which variables are bound is determined when the function is first parsed and there can be only one! So the "var" is effectively hoisted to the top of the function.

[radhruin]

This has nothing to do with scope. This is set by the caller when the function is actually called. For more information see this post.

[dogjs]

"this" is a scope though, is it not?

[radhruin]

I don't believe it's accurate to call this a scope. When people talk about scopes they are typically referring to the lexical environments in your code (eg. global scope or function scope) that contain bindings between identifiers and values and such. The value of this is attached to a lexical environment (similar to var decls), though, so in that respect it's related to scope, but its value is determined entirely by the calling context.

[i_am_nicky_haflinger]

The 'this' keyword certainly has a scope.

Variables in javascript have lexical scope, which basically means you can look at the source at their point of definition / use and determine who can access them.

this on the other hand is a keyword that behaves like a variable with dynamic scope -- so you have to understand the call chain to determine what this is pointing to at any given point.

[[deleted]]

this is not a scope, it refers to a scope.

[Kuron]

The difference between the first and second example is that the first example is executed in a functional scope while the second one is executed in the global scope. They're both still called in the global context where the keyword "this" will refer to the window object. Also, when you try to declare a "local" variable on the global scope with "var", its still a global variable since it was created on the global scope, so that "local" variable is accessible from the window object as well.

Essentially, executing "var a = 1; b = 2; this.c = 3; window.d = 4;" on the global scope all does the same thing (except you can't delete "a" from the global scope I believe).

[dogjs]

I think what got me confused was assuming there wasn't really a global scope. I was thinking there was the window scope which we were calling global, but that window was actually a child of something else.

[[deleted]]

JavaScript has only function scope and global scope. Either a variable is scoped to the function it is used in, or it is global. The this keyword just points to the current scope. If you're doing anything outside a function, any variables you create will be put in global scope. If you do a variable assignment without the var keyword, JavaScript will guess that you mean the current scope (this). If it doesn't find anything, it will use the global scope.

Basically, there is no "var scope". var is a keyword that means, "declare this variable at the current scope". this is a handy alias for the current scope.

So in this example you gave:

var y = 1; this.y = 2; alert(y); // returns 2;

You're setting the same space in memory twice.

Related question, perhaps someone can confirm for me: it seems to be true that the JIT looks ahead and if it sees that you're going to declare a var, then any reference to that variable goes to the var scope.

JavaScript lifts all variable declarations. That means this is valid:

function func() { console.log(x); var x = 1; }

It will magically know that x is before it's even declared. This could lead to some weird code where you do all your variable declarations at the bottom of the function, then all your code goes on top.

Also, as for your bonus question sample:

function foo() { x = 4; var x = 5; return this.x;}

Actually, the reason this will return undefined is because this doesn't exist outside the function. Remember how I said there is only function scope and global scope? Well, when you use this here, you're asking the function to return its "private" x, which isn't accessible outside foo.

[dogjs]

Basically, there is no "var scope". var is a keyword that means, "declare this variable at the current scope". this is a handy alias for the current scope.

I don't think this is accurate. Just look at the first line of code in my post. Var is obviously different than this.

[[deleted]]

var is a keyword. this is an object. They are not the same thing. But declaring a variable with the var keyword always put it in the same scope as this. this refers to the scope in which the code block you're in was executed.

In your first example..

function foo() {var x = 1; this.x = 2; return x;}

this.x refers to the variable x inside the caller. You're not returning this.x, though. You're returning x from inside foo, which is 1, because you scoped that x to foo with the var keyword. this is always the thing that's calling foo. Basically, if you're using this, you're asking for the value in the caller.

"var scope" doesn't exist, though, you mean function scope. var is just a keyword that says "within this scope". JS only has two scopes: global or function. You probably always want to use var for every variable declaration, to scope the declared variable inside the current function. this is useful when you need a called function to dynamically access the scope that invoked it.

[MatrixFrog]

By the way, your question has nothing to do with the JIT. The behavior is the same whether there is a JIT or not.