globalThis

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2020年1月⁩.

globalThis はグローバルプロパティで、グローバルオブジェクトと同等であるグローバルなthisが格納されています。

試してみましょう

function canMakeHTTPRequest() {  return typeof globalThis.XMLHttpRequest === "function";}console.log(canMakeHTTPRequest());// Expected output (in a browser): true

値

グローバルのthis オブジェクトです。

`globalThis` のプロパティ属性
書込可能	可
列挙可能	不可
設定可能	可

メモ:globalThis プロパティは構成可能で書き込み可能なので、コードの作成者は、信頼できないコードを実行する際にこのプロパティを非公開にして、グローバルオブジェクトが公開されるのを防ぐことができます。

従来、グローバルスコープにアクセスするには、JavaScript 環境ごとに異なる構文を必要としていました。ウェブ上ではwindow,self,frames を使うことができます。しかしWeb Worker はself のみを利用することができます。Node.js はこれらのいずれも利用できず、代わりにglobal を使用する必要があります。this キーワードは、厳格でないモードで実行されている関数の中で使用することもできますが、厳格モードで実行されているモジュールや関数の中ではundefined になります。Function('return this')() を使用することもできますが、CSP などによってeval() を無効にしている環境では、この方法でもFunction の使用が抑制されます。

globalThis プロパティは、環境を越えてグローバルなthis 値 (すなわちグローバルオブジェクト自身) にアクセスするための標準的な方法を提供します。window やself などの同様のプロパティとは異なり、これはウィンドウのコンテキストでも非ウィンドウのコンテキストでも動作することが保証されています。この方法では、コードがどの環境で実行されているのかを知らなくても、一貫した方法でグローバルオブジェクトにアクセスすることができます。名前を覚えやすくするために、グローバルスコープではthis の値はglobalThis であることを忘れないでください。

メモ:globalThis は、通常、グローバルオブジェクトと同じ概念です（つまり、globalThis にプロパティを追加すると、それらはグローバル変数になります）。これは、ブラウザーや Node の場合ですが、ホストは、グローバルオブジェクトとは無関係の別の値をglobalThis に指定することができます。

HTML と WindowProxy

多くのエンジンではglobalThis は実在のグローバルオブジェクトの参照になりますが、ウェブブラウザーにおいては、iframe およびウィンドウ間のセキュリティ上の配慮から、これは（直接アクセスできない）実在のグローバルオブジェクトに関するProxy になります。一般的な利用に関わることは稀ですが、認識しておくことは重要です。

命名

self やglobal のような他の一般的な名前の選択肢は、既存のコードとの互換性を損なう可能性があるため、候補から除外されました。詳しくはlanguage proposal's "naming" document を参照してください。

globalThis は、文字通り、グローバルなthis 値です。これは、オブジェクトを指定せずに呼び出された厳格モードではない関数内のthis 値と同じ値です。また、スクリプトのグローバルスコープにおけるthis の値でもあります。

例

異なる環境間でグローバルの検索

通常、グローバルオブジェクトを明示的に指定する必要はありません。そのプロパティは、グローバル変数として自動的にアクセスできます。

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

ただし、グローバルオブジェクトに明示的にアクセスする必要がある場合が 1 つあります。それは、通常ポリフィルの目的で、グローバルオブジェクトに書き込みを行う場合です。

globalThis の導入前、環境全体のグローバルオブジェクトを取得する唯一の信頼できるクロスプラットフォームな方法はFunction('return this')() でした。しかし、これは一部の設定でCSP 違反を発生させるため、作成者は次のような区分定義を使用することになります（オリジナルの core-js のソースを若干変更）。

function check(it) {  // Math はあらゆる環境にグローバルに存在することが知られている  return it && it.Math === Math && it;}const globalObject =  check(typeof window === "object" && window) ||  check(typeof self === "object" && self) ||  check(typeof global === "object" && global) ||  // 厳格モードで実行すると、これは undefined を返す  (function () {    return this;  })() ||  Function("return this")();

グローバルオブジェクトを取得した後、そのオブジェクトに新しいグローバルを定義することができます。例えば、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,  });}

globalThis が利用可能になったため、異なる環境間でグローバルを追加で検索する必要がなくなりました。

if (typeof globalThis.Intl === "undefined") {  Object.defineProperty(globalThis, "Intl", {    value: {      // 独自の Intl 実装    },    enumerable: false,    configurable: true,    writable: true,  });}