globalThis

Probieren Sie es aus

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

console.log(canMakeHTTPRequest());
// Expected output (in a browser): true

Wert

Das globale this-Objekt.

Beschreibung

Historisch gesehen erforderte der Zugriff auf das globale Objekt unterschiedliche Syntax in verschiedenen JavaScript-Umgebungen. Im Web können Sie window, self oder frames verwenden - aber in Web Workers funktioniert nur self. In Node.js funktioniert keine dieser Möglichkeiten, stattdessen muss global verwendet werden. Das this-Schlüsselwort konnte in Funktionen verwendet werden, die im nicht-strikten Modus ausgeführt wurden, aber this wird in Modulen und innerhalb von Funktionen im strikten Modus undefined sein. Sie können auch Function('return this')() verwenden, aber Umgebungen, die eval() deaktivieren, wie CSP in Browsern, verhindern die Verwendung von Function auf diese Weise.

Die globalThis-Eigenschaft bietet eine standardisierte Möglichkeit, den globalen this-Wert (und damit das globale Objekt selbst) über Umgebungen hinweg zuzugreifen. Im Gegensatz zu ähnlichen Eigenschaften wie window und self ist sie garantiert in Fenster-und Nicht-Fenster-Kontexten funktionsfähig. Auf diese Weise können Sie auf das globale Objekt in konsistenter Weise zugreifen, ohne wissen zu müssen, in welcher Umgebung der Code ausgeführt wird. Um Ihnen zu helfen, den Namen zu merken: Im globalen Bereich ist der this-Wert globalThis.

HTML und der WindowProxy

In vielen Engines wird globalThis eine Referenz auf das eigentliche globale Objekt sein, aber in Webbrowsern, aufgrund von Sicherheitsüberlegungen bei iframes und Fenster-übergreifenden Zugriffen, verweist es auf einen Proxy um das eigentliche globale Objekt (auf das Sie nicht direkt zugreifen können). Diese Unterscheidung ist im allgemeinen Gebrauch selten relevant, aber wichtig zu wissen.

Namensgebung

Mehrere andere beliebte Namensoptionen wie self und global wurden aus der Überlegung ausgeschlossen, da sie die Kompatibilität mit bestehendem Code gefährden könnten. Für weitere Details siehe das Dokument zur Namensgebung des Sprachvorschlags.

globalThis ist, ganz wörtlich, der globale this-Wert. Es ist derselbe Wert wie der this-Wert in einer nicht-strikten Funktion, die ohne ein Objekt aufgerufen wird. Es ist auch der Wert von this im globalen Bereich eines Skripts.

Beispiele

Suche nach dem Globalen über Umgebungen hinweg

Normalerweise muss das globale Objekt nicht explizit angegeben werden — seine Eigenschaften sind automatisch als globale Variablen zugänglich.

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

Ein Fall, in dem man jedoch explizit auf das globale Objekt zugreifen muss, ist, wenn man darauf schreiben möchte, üblicherweise zu dem Zweck von Polyfills.

Vor globalThis war der einzige zuverlässige plattformübergreifende Weg, das globale Objekt für eine Umgebung zu erhalten, Function('return this')(). Dies verursacht jedoch CSP-Verletzungen in einigen Einstellungen, weshalb Autoren eine stückweise Definition wie diese verwendeten (leicht angepasst aus der originalen core-js-Quelle):

function check(it) {
  // Math is known to exist as a global in every environment.
  return it && it.Math === Math && it;
}

const globalObject =
  check(typeof window === "object" && window) ||
  check(typeof self === "object" && self) ||
  check(typeof global === "object" && global) ||
  // This returns undefined when running in strict mode
  (function () {
    return this;
  })() ||
  Function("return this")();

Nachdem das globale Objekt erhalten wurde, können wir neue Globale darauf definieren. Zum Beispiel das Hinzufügen einer Implementierung für Intl:

if (typeof globalObject.Intl === "undefined") {
  // No Intl in this environment; define our own on the global scope
  Object.defineProperty(globalObject, "Intl", {
    value: {
      // Our Intl implementation
    },
    enumerable: false,
    configurable: true,
    writable: true,
  });
}

Mit globalThis verfügbar, ist die zusätzliche Suche nach dem Globalen über Umgebungen hinweg nicht mehr notwendig:

if (typeof globalThis.Intl === "undefined") {
  Object.defineProperty(globalThis, "Intl", {
    value: {
      // Our Intl implementation
    },
    enumerable: false,
    configurable: true,
    writable: true,
  });
}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Polyfill von globalThis in core-js
• es-shims Polyfill von globalThis
• this