我对JavaScript有些陌生并且有一些关于范围的问题，以前似乎没有被明确询问过。 在函数的顶部，我正在以角度为单位，变量vm被设置为等this 。 据我所知，任何以vm前提的内容都将在this范围内， this与函数范围的开头有什么不同？ 更明确的是， vm.foo = "test"在范围方面与函数内部的var foo = "test" vm.foo = "test"不同。 任何帮助将非常感激。
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.
最满意答案
如果设置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
如您所见，函数内部实际上是指全局window对象。 这意味着您在函数内部分配的vm.foo的值实际上可用于window可访问的任何位置（即，脚本中的任何位置）。 如果使用其call方法调用函数，则可以更改使用的对象，并显式传递另一个对象作为thisArg 。 如果在某个对象上调用函数作为方法，也可以获得不同的对象。 以下是一个说明这两种可能性的示例：
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.foo初始值，因为相应的对象是使用foo属性的值初始化的。 this.foo的值在此引用的对象中持续存在，而不是在函数本身中（除非this 是引用函数本身）。
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).
更多推荐
发布评论