Skip to content

Commit

Permalink
Total this reference overhaul (mdn#22253)
Browse files Browse the repository at this point in the history
  • Loading branch information
Josh-Cena authored Nov 12, 2022
1 parent b713a31 commit 4b5ba2a
Show file tree
Hide file tree
Showing 2 changed files with 281 additions and 329 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -14,19 +14,22 @@ browser-compat: javascript.builtins.globalThis

{{jsSidebar("Objects")}}

The global **`globalThis`** property contains the global `this` value, which is akin to the [global object](/en-US/docs/Glossary/Global_object).
The global **`globalThis`** property contains the [global `this`](/en-US/docs/Web/JavaScript/Reference/Operators/this#global_context) value, which is usually akin to the [global object](/en-US/docs/Glossary/Global_object).

{{EmbedInteractiveExample("pages/js/globalprops-globalthis.html","shorter")}}

{{JS_Property_Attributes(1, 0, 1)}}

> **Note:** The `globalThis` property is configurable and writable so that code authors can hide it when executing untrusted code and prevent exposing the global object.
## Description

Historically, accessing the global object has required different syntax in different JavaScript environments. On the web you can use {{domxref("Window/window", "window")}}, {{domxref("Window/self", "self")}}, or {{domxref("Window/frames", "frames")}} - but in [Web Workers](/en-US/docs/Web/API/Worker) only `self` will work. In Node.js none of these work, and you must instead use `global`.
The `this` keyword could be used inside functions running in non–strict mode, but `this` will be `undefined` in Modules and inside functions running in strict mode. You can also use `Function('return this')()`, but environments that disable {{jsxref("Global_Objects/eval", "eval()")}}, like {{Glossary("CSP")}} in browsers, prevent use of {{jsxref("Function")}} in this way.
Historically, accessing the global object has required different syntax in different JavaScript environments. On the web you can use {{domxref("Window/window", "window")}}, {{domxref("Window/self", "self")}}, or {{domxref("Window/frames", "frames")}} - but in [Web Workers](/en-US/docs/Web/API/Worker) only `self` will work. In Node.js none of these work, and you must instead use `global`. The `this` keyword could be used inside functions running in non–strict mode, but `this` will be `undefined` in modules and inside functions running in strict mode. You can also use `Function('return this')()`, but environments that disable {{jsxref("Global_Objects/eval", "eval()")}}, like {{Glossary("CSP")}} in browsers, prevent use of {{jsxref("Function")}} in this way.

The `globalThis` property provides a standard way of accessing the global `this` value (and hence the global object itself) across environments. Unlike similar properties such as `window` and `self`, it's guaranteed to work in window and non-window contexts. In this way, you can access the global object in a consistent manner without having to know which environment the code is being run in. To help you remember the name, just remember that in global scope the `this` value is `globalThis`.

> **Note:** `globalThis` is generally the same concept as the global object (i.e. adding properties to `globalThis` makes them global variables) — this is the case for browsers and Node — but hosts are allowed to provide a different value for `globalThis` that's unrelated to the global object.
### HTML and the WindowProxy

In many engines `globalThis` will be a reference to the actual global object, but in web browsers, due to iframe and cross-window security considerations, it references a {{jsxref("Proxy")}} around the actual global object (which you can't directly access). This distinction is rarely relevant in common usage, but important to be aware of.
Expand All @@ -35,6 +38,8 @@ In many engines `globalThis` will be a reference to the actual global object, bu

Several other popular name choices such as `self` and `global` were removed from consideration because of their potential to break compatibility with existing code. See the [language proposal's "naming" document](https://github.com/tc39/proposal-global/blob/master/NAMING.md) for more details.

`globalThis` is, quite literally, the global `this` value. It's the same value as the `this` value in a non-strict function called without an object. It's also the value of `this` in the global scope of a script.

## Examples

### Search for the global across environments
Expand Down
Loading

0 comments on commit 4b5ba2a

Please sign in to comment.