globalThis

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

La propriété globale globalThis renvoie l'objet global de plus haut niveau.

Exemple interactif

Syntaxe

js
globalThis;

Description

Par le passé, il était nécessaire d'utiliser différentes syntaxes pour différents environnements afin d'accéder à la portée globale. Sur le Web, on peut utiliser window, self ou frames ; pour les web workers, seul self peut être employé ; pour Node.js aucun de ces mots-clés ne fonctionne et il faut utiliser global. Le mot-clé this pouvait être utilisé à l'intérieur des fonctions en mode non-strict mais vaudra sinon undefined dans les modules et dans les fonctions utilisant le mode strict.

La propriété globalThis fournit une méthode standard d'accès à l'objet this global, quel que soit l'environnement. Contrairement aux propriétés window et self, ce mot-clé fonctionnera quel que soit le contexte (que celui-ci soit doté de fenêtres ou non). Ainsi, on peut accéder à l'objet global de façon homogène, quel que soit l'environnement dans lequel le code est utilisé.

Pour mieux mémoriser ce nom, on se rappellera que la valeur de this dans la portée globale est globalThis.

Accès indirect à la variable globale dans un contexte web

Dans la plupart des environnements, globalThis sera une référence directe à l'objet global. Cependant, dans les navigateurs web, avec les principes de sécurité relatifs aux iframes et aux liens entre les fenêtres, globalThis fournira un Proxy sur l'objet global (auquel on n'aura donc pas accès directement).

Nommage

D'autres noms furent proposés pour cette fonctionnalité (tels que self et global) mais ils furent écartés car ils pouvaient entraîner des problèmes de compatibilité avec du code existant. Pour plus de détails, voir le document de la proposition pour le nommage.

Exemples

Avant l'introduction de globalThis, la seule façon qui permettait d'obtenir l'objet global de l'environnement de façon homogène était Function('return this')(). Toutefois, cela enfreignait certaines règles CSP avec certains réglages et es6-shim, par exemple, devait utiliser une logique conditionnelle :

js
var getGlobal = function () {
  if (typeof self !== "undefined") {
    return self;
  }
  if (typeof window !== "undefined") {
    return window;
  }
  if (typeof global !== "undefined") {
    return global;
  }
  throw new Error("impossible de trouver l'objet global");
};

var globals = getGlobal();

if (typeof globals.setTimeout !== "function") {
  // pas de setTimeout pour cet environnement
}

Avec globalThis, il n'est plus nécessaire de parcourir les différents mots-clés des différents environnements :

js
if (typeof globalThis.setTimeout !== "function") {
  // pas de setTimeout pour cet environnement
}

Spécifications

Specification
ECMAScript Language Specification
# sec-globalthis

Compatibilité des navigateurs

BCD tables only load in the browser