Lecture
In JavaScript, working with global objects (self, window, global, globalThis) and context (this) — is the foundation that determines how your code will behave in different environments: the browser, Node.js, a Service Worker, as well as inside classes and modules.
Cross-platform compatibility: the same code can run in the browser, on the server (Node.js), or in a worker. To avoid errors, it's important to know which global object is available in each environment.
Predictability: incorrect use of this or global references leads to unexpected bugs. For example, in ES modules this equals undefined, while in scripts — window.
Clean architecture: proper use of global objects helps write code without antipatterns like «magical» dependencies on the environment.
Thus, understanding context and global objects — is not just theory, but a practical necessity. It helps write code that will work equally correctly in any environment and won't turn into a collection of antipatterns.
window — the main global object.
Contains all built-in functions (alert, setTimeout) and global variables.
Available only in the browser.
self — a synonym for window, but more often used in the context of Web Workers and Service Workers.
In regular scripts self === window.
globalThis — the universal standard way to get the global object.
Works the same way in the browser, Node.js, and other environments.
global — the analog of window, but in the Node.js environment..
globalThis — the modern standard that unifies window and global.
It is recommended to use it for cross-platform code.
self — the main global object.
Unlike the browser, there is no window here.
Used to register events (self.addEventListener('fetch', ...)).
In the browser:
In scripts outside modules: this === window.
In modules (type="module"): this === undefined.
In Node.js:
In the global scope: this !== global, and equals {} (an empty object).
In CommonJS modules: this refers to module.exports.
Inside class methods, this refers to the current instance of the object.
In static methods, this refers to the class itself.
In ES modules (.mjs or type="module"):
this at the top level equals undefined.
This is done for strict module isolation.
In CommonJS (Node.js):
this at the top level equals module.exports.
| Environment | Global object | self | window | global | globalThis | this (global) |
|---|---|---|---|---|---|---|
| Browser (script) | window | yes | yes | no | yes | window |
| Browser (module) | window | yes | yes | no | yes | undefined |
| Node.js | global | no | no | yes | yes | {} or module.exports |
| Service Worker | self | yes | no | no | yes | self |
Hard binding to window or global: such code won't work in a different environment.
Using this at the top level of modules: in ES modules this is always undefined, which breaks the logic.
Mixing contexts: for example, calling a class method without binding loses this and breaks access to properties.
Use globalThis — this is the modern and universal way to get the global object without being tied to a specific environment.
In a Service Worker — always work through self, since window is not available there.
In classes — use this to access the instance, but be careful when passing methods as callbacks (bind them via .bind() or use arrow functions).
In modules — don't rely on this, and use explicit exports and imports instead.
Use globalThis for universal access to the global object.
In a Service Worker always use self.
In classes and methods, watch the context of this, especially when passing functions as callbacks.
Avoid direct use of window or global if you are writing cross-platform code.
Remember that in ES modules this at the top level equals undefined.
Thus, understanding the differences between self, window, global, globalThis, and this is critical for writing universal and correct JavaScript code, especially if you work simultaneously with the browser, Node.js, and Service Worker.
Comments