ECMAScript 2021 中的全局属性 globalThis 详解

在 ECMAScript 2021 中,新增了一个全局属性 globalThis,它提供了一个标准的方式来获取全局对象。在浏览器环境中,全局对象为 window,而在 Node.js 环境中,全局对象为 global。使用 globalThis 可以让我们在不同的环境中获取全局对象,而不需要关心当前代码运行的环境。

globalThis 的使用

globalThis 是一个只读属性,它可以直接在全局作用域中访问。以下是获取全局对象的三种方式:

-- -- -----
--------------------

-- -- - ------- -
--------------------

-- -- -- ----------
------------------------

在浏览器环境中,以上三种方式都可以获取到全局对象 window。在 Node.js 环境中,以上三种方式都可以获取到全局对象 global。但是,使用 globalThis 可以让我们在不同的环境中获取全局对象,而不需要关心当前代码运行的环境。

globalThis 的应用场景

globalThis 的应用场景很多,以下是一些常见的应用场景。

在 Web Worker 中获取全局对象

Web Worker 是一种运行在后台线程中的 JavaScript 脚本。它可以让我们在浏览器中开启一个新的线程来执行 JavaScript 代码,这样就可以避免阻塞主线程。在 Web Worker 中,全局对象为 self,但是我们可以使用 globalThis 来获取全局对象。

-- - --- ------ -------
------------------------

在跨域的 iframe 中获取全局对象

在跨域的 iframe 中,我们无法使用 window.parent 或 top 来获取全局对象,因为这些属性只能访问同域的父窗口或顶级窗口。但是,我们可以使用 globalThis 来获取全局对象。

-- ---- ------ -------
------------------------

在不同的 JavaScript 运行环境中共享全局变量

在不同的 JavaScript 运行环境中,全局变量的名称可能不同,但是我们可以使用 globalThis 来获取全局对象,并通过全局对象来访问全局变量。

-- -----
---------- - ------

-- - ------- -
---------- - ------

-- ---- ---------- -----------
---------------------------- -- ---

总结

globalThis 是 ECMAScript 2021 中新增的全局属性,它提供了一个标准的方式来获取全局对象。使用 globalThis 可以让我们在不同的 JavaScript 运行环境中获取全局对象,而不需要关心当前代码运行的环境。globalThis 的应用场景很多,特别是在 Web Worker 和跨域的 iframe 中。我们可以通过全局对象来访问全局变量,从而在不同的 JavaScript 运行环境中共享全局变量。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/65de62b41886fbafa4bae63f


猜你喜欢

  • 详解 Android Material Design 下的 CoordinatorLayout

    在 Android Material Design 设计风格中,CoordinatorLayout 是一个非常重要的布局容器。它可以协调子视图之间的交互,比如滚动、拖拽等。

    8 个月前
  • PWA 技术:如何解决应用在低版本浏览器上的兼容性问题

    前言 PWA(Progressive Web App)是一种新型的 Web 应用程序,它可以通过 Web 技术实现类似原生应用的用户体验,例如离线访问、推送通知、桌面图标等。

    8 个月前
  • 无障碍 Web 设计中键盘访问与功能的实现思路

    随着互联网的普及,越来越多的人使用电脑和移动设备浏览网页。但是,对于那些视觉障碍、听觉障碍或身体上有障碍的人来说,访问网页可能会变得非常困难。为了让这些人也能够使用互联网,无障碍 Web 设计变得非常...

    8 个月前
  • CSS Grid:如何使用 repeat() 函数重复设置网格行和列?

    在前端开发中,CSS Grid 是一种非常流行的布局方式,它可以让我们更加灵活地控制网格布局。而在 CSS Grid 中,repeat() 函数是一个非常实用的函数,它可以让我们更加方便地重复设置网格...

    8 个月前
  • 如何使用 Docker Compose 调试 Serverless 应用程序?

    前言 Serverless 架构已经成为了现代应用程序开发的一种趋势。与传统的应用程序不同,Serverless 应用程序的代码和资源都是在云端运行的,因此开发和调试起来有一些不同的挑战。

    8 个月前
  • ECMAScript 2020 中的新特性:Optional Chaining 操作符:如何避免代码写冗长?

    在前端开发中,我们经常需要访问一个对象的属性或者方法。但是,当对象的属性或者方法不存在时,我们往往需要写很多的判断语句来避免出现错误。这不仅让代码显得冗长,还容易出错。

    8 个月前
  • Fastify 和 PM2 全面集成,轻轻松松打造可靠稳定的应用

    Fastify 和 PM2 全面集成,轻轻松松打造可靠稳定的应用 随着前端技术的快速发展和应用场景的不断扩大,越来越多的开发者开始注重应用的性能和稳定性。在这个背景下,Fastify 和 PM2 的全...

    8 个月前
  • 如何使用 Profiling 找出程序瓶颈

    在前端开发中,我们经常会遇到程序运行缓慢的情况。这时候,我们需要找到程序的瓶颈,才能进行优化。而 Profiling 是一种常用的找出程序瓶颈的方法。本文将介绍如何使用 Profiling 找出程序瓶...

    8 个月前
  • Kubernetes 中使用 Volume 和 StorageClass 进行存储管理

    在 Kubernetes 中,存储管理是一个非常重要的问题。在大多数情况下,我们需要将数据持久化,以便在容器被删除时不会丢失数据。Kubernetes 提供了多种存储管理方式,其中 Volume 和 ...

    8 个月前
  • RxJS 中使用 startWith 操作符设置初始值

    RxJS 中使用 startWith 操作符设置初始值 在 RxJS 中,startWith 操作符是一个非常常用的操作符,它的作用是在 Observable 流中添加一个初始值。

    8 个月前
  • 在 Deno 中如何使用 puppeteer 进行网页截图

    Puppeteer 是一个基于 Node.js 的开源工具,它提供了一套高级 API,可以直接操作 Chrome 或 Chromium 浏览器。使用 Puppeteer 可以完成许多自动化任务,例如网...

    8 个月前
  • 在 Docker 中使用 Jupyter Notebook 进行数据分析的技巧

    在 Docker 中使用 Jupyter Notebook 进行数据分析的技巧 随着数据分析在各个领域的应用越来越广泛,Jupyter Notebook 的使用也变得越来越普遍。

    8 个月前
  • TypeScript 中的实例类型与 typeof 类型的区别与使用

    TypeScript 是一种强类型的 JavaScript 超集语言,它提供了许多类型系统的特性来帮助开发人员更好地管理代码和避免潜在的错误。其中,实例类型和 typeof 类型是 TypeScrip...

    8 个月前
  • 如何在 Mocha 测试框架中使用 CI/CD 工具来持续测试代码?

    前言 在现代软件开发中,持续集成和持续交付(CI/CD)已经成为了不可或缺的一部分。CI/CD 工具可以帮助开发者自动化构建、测试和部署软件,从而提高开发效率、减少错误和加速软件交付。

    8 个月前
  • 如何使用 LESS 实现 CSS 精灵图

    在前端开发中,CSS 精灵图是常用的技术之一,它可以将多张图片合并成一张,并通过 CSS 的 background-position 属性来控制显示不同的图片。这种技术可以减少 HTTP 请求,提高页...

    8 个月前
  • 使用 Tailwind 和 Strapi 打造一个多语言博客

    使用 Tailwind 和 Strapi 打造一个多语言博客 在现代的互联网时代,拥有一个个性化的博客网站已经成为了一个非常流行的趋势。然而,对于全球化的互联网而言,仅仅使用一种语言来展示你的博客内容...

    8 个月前
  • 如何在项目中集成 ESLint 和 Prettier

    在前端开发中,代码的规范性和可维护性非常重要。ESLint 和 Prettier 是两个非常流行的代码规范工具,可以帮助我们在开发中自动检测和修复代码中的问题。本文将介绍如何在项目中集成 ESLint...

    8 个月前
  • 进阶 Koa:深入理解 koa-compose 中间件合并流程

    Koa 是一个轻量级的 Node.js Web 框架,它的核心思想是基于中间件的洋葱模型,使得开发者可以通过组合多个中间件来构建出复杂的应用程序。而 koa-compose 就是 Koa 中间件的核心...

    8 个月前
  • Flutter Material Design 之 TextField

    在 Flutter 开发中,TextField 是一个非常重要的组件,它可以让用户输入文本或数字等信息。Flutter 的 Material Design 风格的 TextField 提供了丰富的样式...

    8 个月前
  • Webpack 的 CommonsChunkPlugin 详解

    Webpack 是一个现代化的前端构建工具,它可以将多个 JavaScript 模块打包成一个或多个文件,以提高页面性能和开发效率。其中,CommonsChunkPlugin 是 Webpack 中一...

    8 个月前

相关推荐

    暂无文章