globalThis

Exemple interactif

function canMakeHTTPRequest() {
  return typeof globalThis.XMLHttpRequest === "function";
}

console.log(canMakeHTTPRequest());
// Résultat attendu (dans un navigateur) : true

Valeur

L'objet global this.

Description

Historiquement, accéder à l'objet global a nécessité différentes syntaxes selon les environnements JavaScript. Sur le Web, vous pouvez utiliser window, self, ou frames — mais dans les Web Workers seul self fonctionne. Dans 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 this vaudra undefined dans les modules et dans les fonctions utilisant le mode strict. Vous pouvez aussi utiliser Function('return this')(), mais les environnements qui désactivent eval(), comme CSP dans les navigateurs, empêchent l'utilisation de Function de cette manière.

La propriété globalThis fournit une méthode standard pour accéder à la valeur de this global (et donc à l'objet global lui-même) dans tous les environnements. Contrairement à des propriétés similaires comme window et self, elle fonctionne aussi bien dans les contextes avec ou sans fenêtre. Ainsi, on peut accéder à l'objet global de façon homogène, sans avoir à connaître l'environnement d'exécution du code. Pour mieux mémoriser ce nom, rappelez-vous que dans la portée globale, la valeur de this est globalThis.

HTML et WindowProxy

Dans de nombreux moteurs, globalThis est une référence à l'objet global réel, mais dans les navigateurs web, en raison des considérations de sécurité liées aux cadres intégrés et aux fenêtres croisées, il référence un Proxy autour de l'objet global réel auquel vous n'avez pas accès directement. Cette distinction est rarement pertinente dans l'usage courant, mais il est important d'en être conscient.

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

Rechercher l'objet global dans différents environnements

Habituellement, il n'est pas nécessaire de préciser explicitement l'objet global — ses propriétés sont automatiquement accessibles comme variables globales.

console.log(window.Math === Math); // true

Cependant, un cas où il faut accéder explicitement à l'objet global est lors de l'écriture sur celui-ci, généralement pour des prothèses d'émulation.

Avant globalThis, la seule façon fiable et multiplateforme d'obtenir l'objet global d'un environnement était Function('return this')(). Cependant, cela provoque des violations de CSP dans certains contextes, donc les auteur·ice·s utilisaient une définition par morceaux comme celle-ci (légèrement adaptée de la source core-js originale ^(angl.)) :

function verifier(it) {
  // Math est connu pour exister en tant que global dans chaque environnement.
  return it && it.Math === Math && it;
}

const globalObject =
  verifier(typeof window === "object" && window) ||
  verifier(typeof self === "object" && self) ||
  verifier(typeof global === "object" && global) ||
  // Ça retourne undefined lorsqu'on exécute en mode strict
  (function () {
    return this;
  })() ||
  Function("return this")();

Après avoir obtenu l'objet global, nous pouvons définir de nouvelles propriétés globales dessus. Par exemple, ajouter une implémentation pour Intl :

if (typeof globalObject.Intl === "undefined") {
  // Pas de Intl dans cet environnement ; définissons le nôtre dans la portée globale
  Object.defineProperty(globalObject, "Intl", {
    value: {
      // Notre implémentation d'Intl
    },
    enumerable: false,
    configurable: true,
    writable: true,
  });
}

Avec la disponibilité de globalThis, la recherche supplémentaire de l'objet global dans les différents environnements n'est plus nécessaire :

if (typeof globalThis.Intl === "undefined") {
  Object.defineProperty(globalThis, "Intl", {
    value: {
      // Notre implémentation d'Intl
    },
    enumerable: false,
    configurable: true,
    writable: true,
  });
}

Spécifications

Compatibilité des navigateurs

Voir aussi

• Prothèse d'émulation de globalThis dans core-js ^(angl.)
• Prothèse d'émulation es-shims de globalThis ^(angl.)
• L'opérateur this