globalThis

最新推荐文章于 2024-11-22 14:31:54 发布

liangshanbo1215

最新推荐文章于 2024-11-22 14:31:54 发布

阅读量563

点赞数 5

分类专栏：前端扩展 Javascript 代码优化文章标签：前端 globalThis

本文链接：https://blog.youkuaiyun.com/liangshanbo1215/article/details/143028069

版权

前端扩展同时被 3 个专栏收录

50 篇文章

订阅专栏

Javascript

47 篇文章

订阅专栏

代码优化

40 篇文章

订阅专栏

globalThis 是一个标准化的全局对象，旨在为所有 JavaScript 环境提供一种一致的方式来访问全局对象。在不同的 JavaScript 环境中，全局对象的名称和访问方式可能不同：

在浏览器环境中，全局对象通常是 window。
在 Web Worker 中，全局对象是 self。
在 Node.js 环境中，全局对象是 global。

globalThis 的引入解决了这些问题，使得开发者可以在任何环境中使用同一个名称来访问全局对象，而无需关心具体的环境。

基本用法

console.log(globalThis); // 输出全局对象

主要特性

跨环境一致性：无论是在浏览器、Web Worker、Node.js 还是其他 JavaScript 环境中，globalThis 都可以用来访问全局对象。
标准化：globalThis 是 ECMAScript 2020 (ES11) 的一部分，得到了广泛的标准化支持。
简化代码：使用 globalThis 可以避免在不同环境中使用不同的全局对象名称（如 window、self、global），从而使代码更加简洁和一致。

支持情况

Chrome：从 Chrome 71 开始支持。
Firefox：从 Firefox 65 开始支持。
Safari：从 Safari 12.1 开始支持。
Edge：从 Edge 79 开始支持（基于 Chromium 的新版 Edge）。
Node.js：从 Node.js 12.0.0 开始支持。

检查 `globalThis` 支持

如果你需要确保当前环境支持 globalThis，可以使用以下代码进行检查：

if (typeof globalThis === 'undefined') {
  console.log('globalThis is not supported in this environment.');
} else {
  console.log('globalThis is supported!');
}

示例代码

以下是一个简单的示例，展示了如何在不同环境中使用 globalThis：

在浏览器中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GlobalThis Example</title>
</head>
<body>
  <script>
    globalThis.staticURL = function(url) {
      return url; // 示例实现
    };

    globalThis.sensors = {
      temperature: 25,
      humidity: 60
    };

    globalThis.isTestDemo = false;

    console.log(globalThis.staticURL('/path/to/resource')); // 输出处理后的 URL
    console.log(globalThis.sensors.temperature); // 输出 25
    console.log(globalThis.isTestDemo); // 输出 false
  </script>
</body>
</html>

在 Node.js 中

globalThis.staticURL = function(url) {
  return url; // 示例实现
};

globalThis.sensors = {
  temperature: 25,
  humidity: 60
};

globalThis.isTestDemo = false;

console.log(globalThis.staticURL('/path/to/resource')); // 输出处理后的 URL
console.log(globalThis.sensors.temperature); // 输出 25
console.log(globalThis.isTestDemo); // 输出 false

回退机制

如果你需要在不支持 globalThis 的环境中使用它，可以使用以下回退机制：

if (typeof globalThis === 'undefined') {
  const globalThis = (function() {
    if (typeof self !== 'undefined') {
      return self;
    } else if (typeof window !== 'undefined') {
      return window;
    } else if (typeof global !== 'undefined') {
      return global;
    } else {
      throw new Error('Unable to locate global object');
    }
  })();
}

这样，即使在不支持 globalThis 的环境中，你也可以通过上述代码确保 globalThis 的存在。

使用场景

跨环境代码：如果你的代码需要在多种环境中运行（例如，浏览器和 Node.js），使用 globalThis 可以避免因全局对象名称不同而导致的错误。
库和框架：库和框架开发者可以使用 globalThis 来确保他们的代码在任何环境中都能正确运行。
简化代码维护：使用 globalThis 可以减少代码中的条件判断，使代码更加简洁和易于维护。