We all know that this in Javascript is a topic where people struggle with. If we now not only think about plain javascript but look in what environment we are running our Javascript code it gets even more complicated.

So you as a developer need to understand what the current global object is?

It is a different object depending on the execution environment you run your code.

What are the usual environments your Javascript code is running in?

A Browser like Firefox, Chrome, Edge, or Opera. The global object here is the window. Writing window.setTimeout() and setTimeout is in a Browser the same. This does not work everywhere. You also have the frames object but most of the time this frames object is equal to the window object.

NodeJS does not know window. In node you have to use global to for example add a function globally. Another diffrences is that nodejs variables are scoped to the module not the the global object. Something like var a = 10 and then checking for it beeing to equal to the global variable will return false. To make it more clear hear is an example:

// Browser Enviourment
var a = 10;
a === window.a // true
// NodeJS Enviourment
var a = 10;
a === global.a // false

Since Deno is built in mind of web standards. It has access to the window object.

Then you have WebWorkers where you have self and you can not access this or window and so on.

I think the problem now should be pretty clear.
Writing universal Javascript is kind of hard.

We can of course polyfill it like that:

var getGlobal = function () { 
  if (typeof self !== 'undefined') { return self; } 
  if (typeof window !== 'undefined') { return window; } 
  if (typeof global !== 'undefined') { return global; } 
  throw new Error('unable to locate global object'); 
}; 

var globals = getGlobal();

The problem is you have to remember to use the globals variable and you need to import or set it up somehow globally for you.

This is why globalThis was introduced into Javascript.

You can use it right now it is supported by all major Browsers besides IE11. But should we really care about a 7-year-old browser? It depends on your project needs.

So how can you use the globalThis. It is actually very easy:

// Browser
console.log(globalThis) // returns the window object
// NodeJS
console.log(globalThis) // returns the globals object
// WebWorkers
console.log(globalThis) // returns the global web workers context

Easy right? so now you don't need to worry about this anymore and can code away.

One thing is still the same es before. Functions like alert() which are exclusive to the Browser will still not work.

Resources

🛑Stop using `this` instead use `globalThis` for global variables

Resources