JavaScript 三種平台及判斷方法

全局屬性globalThis

根據MDN描述:

在以前，從不同的 JavaScript 環境中獲取全局對象需要不同的語句。
在 Web 中，可以通過 window、self 或者 frames 取到全局對象，但是在 Web Workers 中，只有 self 可以。在 Node.js 中，它們都無法獲取，必須使用 global。
在松散模式下，可以在函數中返回 this 來獲取全局對象，但是在嚴格模式和模塊環境下，this 會返回 undefined。
您也可以使用以下代碼獲取全局對象this:

Function('return this')()

但是禁用eval()的環境（例如瀏覽器中的CSP）會阻止以這種方式使用Function。
globalThis 提供了一個標准的方式來獲取不同環境下的全局 this 對象（也就是全局對象自身）。
不像 window 或者 self 這些屬性，它確保可以在有無窗口的各種環境下正常工作。所以，你可以安心的使用 globalThis，不必擔心它的運行環境。
為便於記憶，你只需要記住，全局作用域中的 this 就是 globalThis。

三種平台及判斷方法

• Web 普通瀏覽器平台 包括electron平台的渲染線程
• WebWorker 前端實現"后台計算"的主要途徑
• Node.js worker_threads模塊 包括electron平台的主線程

如何判斷? 使用通用的全局對象globalThis, 這里提出兩種判斷方法.

第一種方法, 判斷globalThis.constructor.name的值, 上面三平台依次表現為:

• Window
• DedicatedWorkerGlobalScope
• Object

第二種, 判斷不同平台特有的globalThis的字段:

• 含有globalThis.process的是Node.js
• 否則, 含有globalThis.window或者globalThis.document的是Web
• 否則, 含有globalThis.FileReaderSync的是WebWorker

代碼如下:

/**
 * 判斷運行平台
 * 第一種方法, 判斷globalThis.constructor.name的值:
 * Window、DedicatedWorkerGlobalScope、Object
 * 第二種, 判斷不同平台特有的globalThis的字段:
 * 含有`globalThis.process`的是Node.js
 * 否則, 含有`globalThis.window`或者`globalThis.document`的是Web
 * 否則, 含有`globalThis.FileReaderSync`的是WebWorker
 */
function js_platform() {
    if (globalThis.constructor.name === 'Window') return 'web';
    if (globalThis.constructor.name === 'DedicatedWorkerGlobalScope') return 'worker';
    if (globalThis.constructor.name === 'Object') return 'node';
    return globalThis.process ? 'node' : (globalThis.window ? 'web' : (globalThis.FileReaderSync ? 'worker' : 'unknown'));
}