Javascript global module or global variable

Question

I couldn't come up with a better question title, sorry.

My question is, in he.js as per https://github.com/mathiasbynens/he/blob/master/he.js , they are using the following code:

/*! https://mths.be/he v0.5.0 by @mathias | MIT license */ ;(function(root) { //...omitted var he = { 'version': '0.5.0', 'encode': encode, 'decode': decode, 'escape': escape, 'unescape': decode }; // Some AMD build optimizers, like r.js, check for specific condition patterns // like the following: if ( typeof define == 'function' && typeof define.amd == 'object' && define.amd ) { define(function() { return he; }); } else if (freeExports && !freeExports.nodeType) { if (freeModule) { // in Node.js or RingoJS v0.8.0+ freeModule.exports = he; } else { // in Narwhal or RingoJS v0.7.0- for (var key in he) { has(he, key) && (freeExports[key] = he[key]); } } } else { // in Rhino or a web browser root.he = he; } }(this));

And if you import this into your page as

<script src="he.js"></script>

You will be able to call the methods in your page as he.encode(...).

My question is, how exactly does it set the variable he?

I mean, I can see the

 } else { // in Rhino or a web browser root.he = he; } }(this));

But at the call of }(this));, what exactly is this?

this will be window, - the this instance in the time of executing the function, which is the window — Catalin
– Catalin, Commented Jan 9, 2015 at 11:13
@RaraituL oh, I see! Thank you. I thought it might be document or something, didn't think of window. Thanks again! — EpicPandaForce
– EpicPandaForce, Commented Jan 9, 2015 at 11:14
When the he.js loads, it defines a anonymous function (everything between the top level {} in the file). Then it call that function by passing window object. it's done by executing '(this));' — erandac
– erandac, Commented Jan 9, 2015 at 11:17

Mister Epic · Accepted Answer · 2015-01-09 11:16:50Z

Let's simplify:

;(function(root) { ... }(this));

So, we have a function that takes an argument called root. This function is being immediately invoked (http://benalman.com/news/2010/11/immediately-invoked-function-expression/), and we are passing the value this to it.

In this context, this is your global object. If you are using a browser, your global object will be window.

So, if you are indeed using a browser:

 root.he = he;

is actually the same as:

window.he = he;

And note, we don't necessarily need to be using a browser, thanks to platforms like Node there are now other contexts where the this global object is something other than window. That's why the other doesn't specify window explicitly and goes through this particular exercise.

This is cool! I've used a var globalVariable = (function(){...})(); before, but passing this makes it prettier than just using a global constant.

Collectives™ on Stack Overflow

Javascript global module or global variable

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related