Referring a member variable from self invoking nested function
-
28-04-2021 - |
Вопрос
I have this piece of code
var f = function() {
this.x = 100;
(
function() {
x = 20;
}
)();
};
var a = new f;
console.log(a.x);
I am wondering why a new variable x is created at global scope, and the output is 100, not 20. If I write instead
var x = 100;
the nested function changes the same x's value. It seems that creating x via
this.x = 100
places x outside the scope of function f. If that is the case, where is it defined? And how can it be accessed?
EDIT : Fixed a typo : console.log(a.x) instead of console.log(x)
Решение
The statement:
this.x = 100;
Does not create a variable in the current scope, it sets a property x
on whatever object this
refers to. In your case this
will be the object just instantiated via new f
, the same object that will be returned by f
and assigned to a
.
When you say:
x = 20;
JavaScript looks for an x
in the current scope and doesn't find it, so it looks in the next scope up, etc., until it gets to the global scope. If it doesn't find x
in any accessible scope it creates a new global variable as you have seen.
To access the property x
from within a nested function the usual practice is to store a reference to this
in a local variable and then the nested function can reference that variable:
var f = function() {
var self = this; // keep a reference to this
this.x = 100;
(
function() {
self.x = 20; // use the self reference from the containing scope
}
)();
};
var a = new f;
console.log(a.x); // will now be 20
The other way to do it is to reference this.x
in the inner function, provided you call the inner function via the .call()
method so that you can explictly set this
to be the same as in the (outer) f
function:
var f = function() {
this.x = 100;
(
function() {
this.x = 20;
}
).call(this);
};
var a = new f;
console.log(a.x);
Further reading:
Другие советы
In javascript, variables have function-level scope. Also, this:
this.x = 100;
is differnt from:
x = 20;
because in later case, x
has global (you have not used var
before it) scope eg it becomes part of window
object.
Also when you are doing:
var a = new f;
console.log(x);
You are accessing global variable x
set via x = 20;
whereas you are suppossed to do:
var a = new f;
console.log(a.x);
var f = function() {
this.x = 100;
console.log(this);
// f
(function() {
console.log(this);
// DOMWindow. So x is a property of window because you're not declaring it with var
x = 20;
})();
};
if you want to assign the product of the anonymous function to the scope of f
then the following will work:
var f = function() {
this.x = (function() {
var x = 20; // Local scope
return x;
})();
};
console.log( (new f().x) );
If you want to change a member function in a nested, anonymous subfunction, you might want to create a pointer to 'this' within scope, as follows:
var f = function() {
this.x = 100; // set the member value
var self = this; // pointer to the current object within this function scope
(
function(){
self.x = 20; // 'self' is in scope
}();
)();
};
var a = new f;
console.log(a.x); // Output: 20
When you declare a variable without var
, the variable is in global scope.