globalThis【JavaScript】

はじめに

前回の記事では、ホスト環境によってglobal objectの名称と挙動が違うことを書きました。

• Node.js：global
• ブラウザ：window

（この他にもホスト環境は存在します）

この記事にコメントを頂いたのですが、どうやらglobalThisという共通の名称が使用できるようです。

名称は同じ。では挙動はどうでしょうか。検証してみます。

ブラウザ：window

前回の記事で確認した、いずれの点もwindowと同じ挙動でした。

• constを使用した変数宣言は、window.nameではアクセスできない
  →globalThis.nameも同様
• varを使用した変数宣言は、window.nameでアクセスできる
  →globalThis.nameも同様
• console.logとwindow.console.logは完全に等しい
  →globalThis.console.logも同様
• 関数宣言functionを使用した場合、window.name()でアクセスできる
  →globalThis.name()も同様
• 関数式の場合は、変数と同じくconstではアクセスできず、varならアクセスできる
  →globalThisも同様

See the Pen Qiita_global_window by Kohki_Takatama (@Kohki-Takatama) on CodePen.

globalThis === windowがtrueなので当然ですね。

Node.js：global

console.log(global === globalThis) //true

なので検証の必要はないと思いますが、念の為

var hoge = "hoge"
console.log(globalThis.hoge) //undefined
const fuga = "fuga"
console.log(globalThis.fuga) //undefined

// 先程の続き
globalThis.hoge = hoge
global.fuga = fuga
console.log(global.hoge) // "hoge"
console.log(globalThis.fuga) // "fuga"

globalと全く同じですね。

結論

• globalThisは各ホスト環境のglobal objectと等しい
• ブラウザのglobalThis（window）とNode.jsのglobalThis（global）は、同じ名称だけど挙動は違う