Understanding javascript functions, scopes and closures
Can someone explain in detail what this js snippet does?
(function (window) {
var test = window['test'] = {};
test.utils = new(function(){ ... })();
})(window);
I understand this feature is not globally covered. I understand that it creates a variable named test that points to a property in an object window
that is an empty object. I also understand what utils
is a property of a test.
I don't understand what is the purpose of the last part (window);
or why the function is utils
denoted as new
.
Explain, please.
source to share
It creates a function and calls it immediately, passing it in window
. The function takes an argument window
and then creates an empty object on it, which is available as a property in window
called test
and as a local variable called test
. Then it creates an object by calling a function through new
and assigns that object test.utils
.
I don't understand what is the purpose of the last part (window), ...
The code you quoted doesn't actually use any target, because the character passed to the main (outer) function window
is the same as the name of the argument that receives it. If their names were different then this would serve a purpose, for example:
(function(wnd) {
})(window);
This would make it window
available inside a function like wnd
.
or why utils is designated new.
utils
will not be a function (at least unless the code you replaced with ...
does something really weird), it will be an object created when that function is called.
All of this could be rewritten more clearly:
(function(window) {
var test;
test = {};
window['test'] = test;
test.utils = new NiftyThing();
function NiftyThing() {
}
})(window);
This still does the window
thing for no reason at all, but hopefully it makes it clear what the bit is doing new(function() { ... })();
.
source to share
First of all, it is a self-executing function.
He called the object himself window
as an input argument to the function to ensure that within the whole function window
it had the expected value.
test.utils = new(function(){ ... })(); <--- This is an object constructor.
When a function is called with a statement new
, it becomes an object's constructor.
For example:
var conztructor = function() {
this.name = "Matias";
};
var obj = new conztructor();
alert(obj.name); // <--- This will alert "Matias"!
The goal (window);
is to create a new variable and reference containing an instance of the JavaScript object window
, avoiding that other libraries can reuse the identifier window
(or any other) and your own library could break because of this situation.
It's good to avoid changing global scope identifiers that can be used by other libraries.
UPDATE
In response to some comments, run this code:
source to share
What happens here is that an anonymous function is being declared. The last part, c (window)
, calls this function, passing it window
as a parameter.
Internally, the call test.utils = new(function(){ ... })();
creates a new object (with content defined by the function passed to new
) and assigns it test.utils
.
source to share