JavaScript globalThis（グローバルThis）

概要: このチュートリアルでは、JavaScriptのglobalThisオブジェクトについて学習します。

JavaScript globalThisオブジェクトの紹介

ES2020では、さまざまな環境でグローバルオブジェクトにアクセスするための標準的な方法を提供するglobalThisオブジェクトが導入されました。

従来、JavaScriptのグローバルオブジェクトは、環境によって異なる名前を持っていました。

Webブラウザでは、グローバルオブジェクトはwindowまたはframesです。

しかし、Web Workers APIにはブラウジングコンテキストがないため、windowオブジェクトがありません。そのため、Web Workers APIはグローバルオブジェクトとしてselfを使用します。

一方、Node.jsはグローバルオブジェクトを参照するためにglobalキーワードを使用します。

global

さまざまな環境で動作し、グローバルオブジェクトにアクセスする必要があるJavaScriptコードを記述する場合、window、frames、self、globalなどの異なる構文を使用する必要がありました。

これを標準化するために、ES2020では、すべての環境で使用可能なglobalThisが導入されました。

const canFetch = typeof globalThis.fetch === 'function';

console.log(canFetch);Code language: JavaScript (javascript)

たとえば、次のコードは、現在の環境がFetch APIをサポートしているかどうかを確認します。

このコードは、fetch()関数がグローバルオブジェクトのプロパティであるかどうかを確認します。Webブラウザでは、globalThisはwindowオブジェクトです。したがって、このコードを最新のWebブラウザで実行すると、canFetchはtrueになります。

globalThis === windowCode language: JavaScript (javascript)

次のコードは、Webブラウザでtrueを返します

trueCode language: JavaScript (javascript)

出力

• まとめ