globalThis という新しいプロパティを使用すると、JavaScriptのグローバルオブジェクトにクロスプラットフォームでアクセスできます。

JavaScriptでグローバルプロパティにアクセスすることは、常にいくつかの困難をもたらしてきました。 これは、プラットフォームごとにアクセス方法が異なるためです。

  • クライアント側JavaScriptwindowまたはselfを使用します
  • Node.jsglobalを使用します
  • Webワーカーselfを使用します

クライアント側のJavaScriptのみを作成している場合、これは大きな問題ではありません。 windowと書くだけで、グローバルオブジェクトを操作できます。

ただし、複数のプラットフォームで動作するポータブルJavaScriptを作成する必要がある場合に問題が発生します(例:Node.jsとクライアントの両方で動作するlodashのようなライブラリ-側)。


一般的な解決策は、次のようなコードを使用するシムを使用して、使用可能なグローバルオブジェクトを決定することです。

var getGlobal = function () { 
  if (typeof window !== 'undefined') {
    return window;  // Client-side JavaScript 
  } 
  if (typeof self !== 'undefined') {
    return self;    // Client-side JavaScript / Web workers
  } 
  if (typeof global !== 'undefined') {
    return global;  // Node.js
  } 
}; 

var __global__ = getGlobal(); 

if (typeof __global__.alert === 'function') { 
  console.log('Client-side land!');
} else {
  console.log('Node.js land!');
};

globalThisを使用する

globalThisはNode.js/client-side / Webワーカーで利用できるため、グローバルオブジェクトとのやり取りがはるかに簡単になります。

if (typeof globalThis.alert === 'function') { 
  console.log('Client-side land!');
} else {
  console.log('Node.js land!');
}

使用しているプラットフォームの検査に別れを告げます。 ✌️

結論

現在、globalThisはステージ3ECMAScriptプロポーザルです。 ただし、Chrome、Firefox、Safari(デスクトップ/モバイル)を含む多くのブラウザでは、この新しいAPIがすでに利用可能になっています。

globalThisチェックアウトAxelRauschmayerのブログ投稿に関する詳細情報📰