accessing global object when using requirejs

Question

I know it's not recommended to use the global object and the whole idea behind using AMD is to avoid using the global object. But for some legacy code, I have to define some stuff in the global object. Currently the code looks like this:

//example2.js
define(function(){
  var globalObject = window;
  globalObject.x = ...
  globalObject.y = ...
});

It works but hard coding the global object window doesn't look very nice and I'm curious to see if it is possible to remove it. When define() was not used, the code looked like this:

//example1.js
x = ...
y = ...

I know, I know you hate this code, but let's be to the point: how can the global variable be accessed in a structured manner inside the define() function in requirejs? I wish there was something like a hidden last parameter to the function that is passed to the define() like this:

//example3.js
define(function(globalObject){
  globalObject.x = ...
  globalObject.y = ...
});

Or even simpler: the this variable would point to the global object inside that function. For example:

//example4.js
define(function(){
  this.x = ...
  this.y = ...
});

Note: I'm not sure about this last one. Investigating the this variable inside the function that is passed to require() says that it is equal to window which can be the answer to my question, but I haven't been able to find any documentation that mentions the context that the passed function is running. Maybe it is running in the context of the global variable after all?

Solution 1

If you're not in strict mode, you can do this:

(function() {
  var global = this;

  define(function(){
    global.x = ...
    global.y = ...
  });
})();

The outer anonymous function that we immediately invoke is invoked with no particular special this value, and so (since this isn't in strict mode), receives the global object as this. (In strict mode, it would receive undefined instead.) So we grab this into a variable (global) within the anonymous function, and use it from the function you pass into define (which closes over it).

Solution 2

I suggest you to create a module that returns the window object. This is specially useful for unit testing purposes (mocking dependencies).

window.js

define(function(){
   return window;
});

app.js

define(['window'], function(win) {
  // Manipulate window properties
  win.foo = 1;  
  console.log(win.foo);      
});

Solution 3

A variation on @TJCrowder's answer, which also works in strict mode:

(function(global) {
    define(function() {

        global.a="this";
        global.b="that";

    });
})(this);

By calling the immediately invoked function with the argument 'this' (which outside a function is the global scope), then whatever the global scope is it gets passed into the IIF as the argument 'global'.

This also avoids hard-coding to the 'window' object, an advantage since that doesn't apply in non-browser environments.

Comments

[AlexStack]

this is a good idea, but I'm still wondering if there is a mechanism from inside the define() function that doesn't require embedding my code in an immediate call function?

[Louis]

If I put that code in a file and pass it to Node, this is {}, whether or not I am in strict mode.

[gman]

so what if you actually want the global object as in you want your module to run an other contexts?

[Túbal Martín]

If I understand you correctly @gman...say our code is inside an iframe but we need the top global object. We can do this: // Code inside iframe define(['window'], function(win) { var topWin = win.top; // Manipulate iframe's window properties win.foo = 1; console.log(win.foo); // Manipulate top window properties topWin.foo = 2; console.log(topWin.foo); });

[gman]

sorry, I meant I'm not running in the browser so the global object is not window

[Destiny Architect]

Thx4this, as 2fast AMDize naive globals from pre-{AMD&equiv} code(til complete fix(hard)), of the 3 solutions here I suspect this 1 notably the best, as it defines&uses a global MODULE to hold the naive globals, notably a AMD en.wikipedia.org/wiki/Singleton_pattern for ‘window’, so that {also allows other even simul global spaces to be plugged in, incl regularly w/o editing module} + {esp as singletons r what’s used for POST-AMD design of globals (per all 4 rated-0+ solutions of stackoverflow.com/q/5608685 )},so I try it 1st 2now quick AMDize lots old code&if works well,+1 here!

[jpaugh]

@Louis I believe self would work in Node, and it certainly works in the browser.

[jpaugh]

@gman Have it return self instead of window.