JavaScript: Scope of 'this' within a function

Question

I'm somewhat new to JavaScript and have a few questions about scope that don't seem to have been explicitly asked about before. At the top of a function I'm working on in angular a variable vm is set equal to this. I understand that anything prefaced with vm going forward will be in scope of this however how is this different from being in the function's scope to begin with? To be more explicit, how would vm.foo = "test" differ from var foo = "test" inside of a function in terms of its scope. Any help would be much appreciated.

Answer 1

If you set vm = this, then properties of vm can persist beyond the scope of the current function invocation. In contrast, a local variable value (e.g., var foo = "test") does not persist past the current function invocation.

Basically, this.foo within a function is not equivalent to var foo within that same function. The first actually references a property value on the this object, whereas the second only references a local variable in the current function invocation scope.

Here's an example to illustrate this difference:

function myFunction(myArg) {
  console.log("this.foo = " + this.foo);
  console.log("foo = " + foo);
  var foo = "test";
  console.log("foo' = " + foo);
  var vm = this;
  console.log("vm.foo = " + this.foo);
  vm.foo = myArg;
  console.log("vm.foo' = " + this.foo);
}

console.log("window.foo = " + window.foo);
console.log(">>> Test call 1");
myFunction("abc");

console.log("window.foo = " + window.foo);

console.log(">>> Test call 2");
myFunction("xyz");

console.log("window.foo = " + window.foo);

For convenience, here is the console output:

window.foo = undefined
>>> Test call 1
this.foo = undefined
foo = undefined
foo' = test
vm.foo = undefined
vm.foo' = abc
window.foo = abc
>>> Test call 2
this.foo = abc
foo = undefined
foo' = test
vm.foo = abc
vm.foo' = xyz
window.foo = xyz

As you can see, this inside the function actually refers to the global window object. That means that the value of vm.foo that you assign inside the function is actually available anywhere that window is accessible (i.e., everywhere in your script). You can change what object is used as this if you invoke the function using its call method, and explicitly pass a different object as thisArg. You can also get a different object as this if you invoke the function as a method on some object. Here's an example illustrating both of these possibilities:

function myFunction(myArg) {
    console.log("this.foo = " + this.foo);
    console.log("foo = " + foo);
    var foo = "test";
    console.log("foo' = " + foo);
    var vm = this;
    console.log("vm.foo = " + this.foo);
    vm.foo = myArg;
    console.log("vm.foo' = " + this.foo);
}

var x = { f: myFunction };
var y = { f: myFunction, foo: "YYY" };
var z = { foo: "ZZZ" };

x.f("x"); // "this" is "x"
y.f("y"); // "this" is "y"
myFunction.call(z, "z"); // "this" is "z"

console.log("x.foo = " + x.foo);
console.log("y.foo = " + y.foo);
console.log("z.foo = " + z.foo);

Notice how the calls that use y and z for this have initial values of this.foo, since the corresponding objects are initialized with a value for the foo property. The value of this.foo persists in the object referenced by this, not in the function itself (unless of course this is referencing the function itself).

Answer 2

Inside a function, var foo = 'test' does not necessarily relate foo to this, because the value of this depends on how the function was called (see Function context).

Rather independently of the above, the reason for assigning this to vm is to keep its reference in case you want to have another function inside this function, where you refer to the original context of this. This is usually done within a controller function, see this Angular Style Guide.