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

Früher war für den Zugriff auf das globale Objekt je nach JavaScript-Umgebung eine andere Syntax erforderlich. Im Web können Sie window, self oder frames verwenden – in Web Workers funktioniert jedoch nur self. In Node.js funktioniert keiner dieser Bezeichner; stattdessen müssen Sie global verwenden. Das Schlüsselwort this ließ sich innerhalb von Funktionen verwenden, die nicht im Strict Mode ausgeführt werden. In Modulen und innerhalb von Funktionen im Strict Mode ist this jedoch undefined. Sie können auch Function('return this')() verwenden. Umgebungen, die eval() deaktivieren, etwa Browser mit CSP, verhindern allerdings, dass Function auf diese Weise verwendet wird.

Die Eigenschaft globalThis bietet eine standardisierte Möglichkeit, umgebungsübergreifend auf den globalen this-Wert und damit auf das globale Objekt selbst zuzugreifen. Anders als bei ähnlichen Eigenschaften wie window und self ist garantiert, dass sie sowohl in Fensterkontexten als auch außerhalb davon funktioniert. So können Sie einheitlich auf das globale Objekt zugreifen, ohne wissen zu müssen, in welcher Umgebung der Code ausgeführt wird. Um sich den Namen zu merken, denken Sie daran: Im globalen Gültigkeitsbereich ist der Wert von this gleich globalThis.

HTML und WindowProxy

In vielen Engines ist globalThis eine Referenz auf das tatsächliche globale Objekt. In Webbrowsern verweist es aufgrund von Sicherheitsanforderungen im Zusammenhang mit iframes und fensterübergreifendem Zugriff jedoch auf einen Proxy um das tatsächliche globale Objekt, auf das Sie nicht direkt zugreifen können. Dieser Unterschied ist bei der üblichen Verwendung selten relevant, sollte Ihnen aber bekannt sein.

Benennung

Mehrere andere naheliegende Namen wie self und global wurden nicht berücksichtigt, da sie möglicherweise die Kompatibilität mit bestehendem Code beeinträchtigt hätten. Weitere Informationen finden Sie im Dokument zur Benennung des Sprachvorschlags.

globalThis ist im wörtlichen Sinne der globale this-Wert. Er entspricht dem this-Wert in einer Funktion, die nicht im Strict Mode ausgeführt und ohne Objekt aufgerufen wird. Er ist auch der Wert von this im globalen Gültigkeitsbereich eines Skripts.

Beispiele

Das globale Objekt umgebungsübergreifend finden

Normalerweise muss das globale Objekt nicht ausdrücklich angegeben werden: Auf seine Eigenschaften kann automatisch als globale Variablen zugegriffen werden.

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

Ein Fall, in dem ausdrücklich auf das globale Objekt zugegriffen werden muss, ist jedoch das Schreiben von Eigenschaften darauf, in der Regel für Polyfills.

Vor globalThis war Function('return this')() die einzige zuverlässige plattformübergreifende Möglichkeit, das globale Objekt einer Umgebung zu erhalten. In manchen Konfigurationen führt dies jedoch zu Verstößen gegen die CSP. Deshalb verwendeten Entwickler eine Definition mit mehreren Alternativen wie diese (leicht angepasst aus dem ursprünglichen Quellcode von core-js):

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 wir das globale Objekt erhalten haben, können wir darauf neue globale Eigenschaften definieren. Beispielsweise können wir eine Implementierung für Intl hinzufügen:

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 ist die zusätzliche umgebungsübergreifende Suche nach dem globalen Objekt nicht mehr nötig:

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 für globalThis in core-js
• Polyfill für globalThis von es-shims
• this