JavaScript: область действия this в функции

Если вы установите vm = this, то свойства vm могут сохраняться за пределами текущего вызова функции. Напротив, локальное значение переменной (например, var foo = "test") не сохраняется за текущим вызовом функции.

В принципе, this.foo внутри функции не эквивалентен var foo внутри этой же функции. Первое на самом деле ссылается на значение свойства для this объекта, тогда как второе ссылается только на локальную переменную в текущей области вызова функции.

Вот пример, иллюстрирующий эту разницу:

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);

Для удобства, вот консольный вывод:

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

Как вы можете видеть, this внутри функции на самом деле относится к глобальному window объекту. Это означает, что значение vm.foo которое вы назначаете внутри функции, фактически доступно в любом месте, где доступно window (т. vm.foo в вашем скрипте). Вы можете изменить, какой объект используется как this если вы вызываете функцию с помощью метода call и явно передаете другой объект как thisArg. Вы также можете получить другой объект как this если вы вызываете функцию как метод для некоторого объекта. Вот пример, иллюстрирующий обе эти возможности:

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);

Обратите внимание, как вызовы, которые используют y и z для this имеют начальные значения this.foo, так как соответствующие объекты инициализируются значением для свойства foo. Значение this.foo сохраняется в объекте, на который this ссылается, а не в самой функции (если, конечно, this не относится к самой функции).