Question

我对JavaScript有些陌生，并且有一些关于范围的问题，以前似乎没有被明确询问过。在我正在处理角色的函数的顶部，变量vm被设置为等于this。我理解前面提到的vm前面的任何内容都将在this的范围内，但这与函数范围的开头有何不同？更明确一点，vm.foo = "test"在范围方面如何与函数内部的var foo = "test"不同。任何帮助将不胜感激。

Answer 1

如果设置vm = this，则vm的属性可以超出当前函数调用的范围。相反，局部变量值（例如var foo = "test"）不会持续超过当前函数调用。

基本上，函数中的this.foo 不等同于同一函数中的var foo。第一个实际引用this对象上的属性值，而第二个仅引用当前函数调用范围中的局部变量。

以下是一个说明这种差异的例子：

＆＃13;

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

＆＃13;

为方便起见，这是控制台输出：

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可访问的任何位置（即脚本中的任何位置）。如果使用call method调用函数，则可以更改使用this的对象，并将其他对象显式传递为thisArg。如果在某个对象上调用该函数作为方法，则还可以将另一个对象作为this。这是一个说明这两种可能性的例子：

＆＃13;

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

＆＃13;

请注意，y使用z和this的调用的初始值为this.foo，因为相应的对象初始化为{{1}的值属性。 foo的值在this.foo引用的对象中持续存在，而不是在函数本身中（当然除非this 引用函数本身）。

Answer 2

在函数内部，var foo = 'test'不一定将foo与this相关联，因为this的值取决于函数的调用方式（请参阅Function context }）。

与上述内容无关，将this分配给vm的原因是为了保留其引用，以防您希望在此函数中包含另一个函数，在该函数中引用this的原始上下文{1}}。这通常在控制器功能中完成，请参阅此Angular Style Guide。

JavaScript：函数中“this”的范围

2 个答案: