ES11 新特性解析:全局对象 globalThis

ES11(也称 ES2020)是 ECMAScript(简称 ES)的最新版本。其中有许多新特性,其中一个较为常用的是全局对象 globalThis。在这篇文章中,我们将深入解析这个新特性,讨论它的用法和指导意义。

全局对象 globalThis 是什么?

全局对象是所有环境都能够访问的一个对象。在浏览器环境中,全局对象就是 window 对象;在 Node.js 环境中,全局对象是 global 对象。

但是,在不同的环境中使用不同的全局对象会导致一些问题。例如,如果我们使用许多 ECMAScript 规范中定义的内置函数和对象,它们的名称可能因环境不同而变化(例如在浏览器中使用 window.fetch(),但在 Node.js 中需要用到其他名称)。这就使得代码的可移植性变得更加复杂。

因此,ES11 引入了一个新的全局对象 globalThis,它解决了上述的问题。无论我们在什么环境下使用它,它都是相同的对象。

如何使用全局对象 globalThis?

使用 globalThis 对象非常简单。我们只需要像这样引用它:

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

这段代码在任何环境下都能工作,因为 globalThis 指向的是全局对象,其名称不会因环境而变化。

需要注意的是,在一些旧版的浏览器和 Node.js 版本中并不支持全局对象 globalThis。不过,可以通过 polyfill 的方式来提供支持。例如,在浏览器环境中,可以使用如下的代码:

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

全局对象 globalThis 的指导意义

全局对象 globalThis 统一了不同环境下的全局对象名称,使得我们可以编写更具可移植性的代码。此外,它还有以下的一些用处:

1. 在嵌套环境下引用全局对象

对于 JavaScript 来说,全局变量和全局对象通常是相同的。但是,在某些情况下,我们可能会遇到嵌套的情况,例如在不同的 iframe 或 Worker 中渲染代码。在这种情况下,如果我们想要访问最外层的全局变量,我们需要使用 window.top 或 self.top,不过这会使我们的代码不可移植。通过使用全局对象 globalThis,我们的代码就能够在不同的嵌套环境下正常工作了。

2. 在函数中引用全局对象

在一些情况下,我们可能需要在函数中使用全局变量。在旧版的 JavaScript 中,我们需要使用 window 对象来访问全局变量。但是,如果我们的代码在其他环境中运行,可能会遇到 window 未定义的情况。现在,我们可以使用 globalThis 来引用全局变量,这将使我们的代码更加通用。

3. 编写可重用的库

对于那些编写库的开发者来说,全局对象 globalThis 对于实现可重用性非常有帮助。例如,库作者可以编写一个全局对象来引用库本身,并将这个对象暴露给用户。这样,即使库的名称在不同的环境下发生了变更,用户仍然能够方便地引用它。

示例

下面是一个简单的示例,展示如何使用全局对象 globalThis 在不同的环境中访问到 position 对象。

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

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

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

在这个例子中,我们使用了 optional chaining 和 nullish coalescing 运算符,它们是 ES11 中另外两个有用的新特性。更多关于这些特性的信息,请参考官方文档。

结论

全局对象 globalThis 是 ECMAScript 2020 中的一个重要新特性,它解决了在不同环境下全局对象名称变化的问题,使得我们可以编写更具可移植性的代码。同时,我们应该注意一些旧版环境中不支持 globalThis 的问题,可以通过 polyfill 来解决。希望这篇文章对你有所帮助,让你更好地理解全局对象 globalThis 的使用和指导意义。

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


猜你喜欢

  • 在 Kubernetes 中解决容器重启问题

    前言 在 Kubernetes 中,容器重启是一件非常常见的事情。由于 Kubernetes 提倡容器无状态(Stateless),因此在容器重启时,需要保证应用程序的状态不会丢失。

    4 天前
  • 在 AngularJS 中使用 $injector 服务的原理和用法

    AngularJS 是一款开放源代码的前端 JavaScript 框架,它为开发人员提供了强大的工具来构建单页面应用程序(Single-Page Application)。

    4 天前
  • 理解 Express.js 的 app.use() 方法及其使用案例

    如今,越来越多的应用程序都采用了 Node.js 技术,而 Express.js 是一个非常流行的 Node.js 框架,用于构建 Web 应用程序和 API。其中,app.use() 方法是 Exp...

    4 天前
  • Headless CMS架构下单页面应用的实现及性能优化

    前言 目前,前端开发是非常流行的技术方向之一。随着云计算和Web技术的发展,单页面应用逐渐变成了越来越重要的一种Web应用程序类型。为了提高协作能力、降低开发难度和实现前后端分离,Headless C...

    4 天前
  • GraphQL 中如何使用批处理查询

    介绍 GraphQL 是一种新兴的查询语言,它与传统的 RESTful API 不同,GraphQL 允许客户端定义所需的数据字段。提供的 API 会返回与客户端定义的数据字段相匹配的数据,而不是按照...

    4 天前
  • 怎样使用 Serverless 框架构建无服务器 API

    在过去,构建一个 Web 应用程序需要租用服务器,并基于服务器运行应用程序代码以响应用户请求。这种方式可能会导致高额的费用和管理成本。 然而,随着 Serverless 技术的出现,我们可以使用 AW...

    4 天前
  • Sequelize ORM 如何处理数据库连接池的错误

    在 Node.js 中,Sequelize 是一种流行的 ORM(Object-Relational Mapping,对象关系映射)框架,在处理关系型数据库时提供了丰富的工具和操作。

    4 天前
  • 解决 Babel 中出现的打包问题

    Babel 是一个在编写 JavaScript 时,将最新的 ECMAScript 6 语法转换为更早的版本(通常是 ECMAScript 5)的工具。但是,在使用 Babel 进行打包时,有时会出现...

    4 天前
  • 解决 ES8 中出现的 TypeError:"caller/arguments" 在严格模式下禁用

    在 ES8 中,caller 和 arguments 的用法会在严格模式下被禁止。这是由于这两个属性在 JavaScript 语言中出现了许多问题和不一致之处。这也导致了在使用各种库和框架中出现了一些...

    4 天前
  • Webpack 打包 React 项目常见问题及解决方法

    介绍 在前端项目中,Webpack 是非常重要的模块打包工具之一,尤其在 React 项目中。Webpack 能够将项目中的各种资源,如 JavaScript、CSS、图片和字体等进行打包,并提供了许...

    4 天前
  • 细说 ES2020 中的双冒号语法,提高 JavaScript 代码可读性

    ES2020 中的双冒号语法是一个新的语法糖,它可以帮助我们更方便地访问对象或函数的属性或方法。这个语法糖可以提高 JavaScript 代码的可读性和可维护性,因为它可以让我们更容易地理解代码的意思...

    4 天前
  • 如何在 Node.js 中使用 JWT 进行用户身份验证?

    引言 用户身份验证是现代应用程序开发中的常见操作。常规方法是在应用程序中使用传统的用户名和密码进行身份验证。然而,使用 JWT(JSON Web Token)进行身份验证是现代应用程序中越来越流行的选...

    4 天前
  • Next.js 中如何部署到服务器?

    在 Web 项目中,部署是一个必须的过程。即使你最初只是在本地机器上使用 Next.js 开发项目,你也需要将你的代码和资源部署到一个服务器上,以便让用户访问。 本文将介绍如何将 Next.js 应用...

    4 天前
  • Chai.js 和 Jasmine 的对比,哪个更适合你?

    前端自动化测试框架为我们节约了大量的测试时间,并且保证了代码的可靠性和稳定性。Chai.js 和 Jasmine 分别是两个被广泛使用的前端自动化测试框架,那么这两个框架之间有哪些差异,哪一个更适合你...

    4 天前
  • Tailwind 中的智能对齐技巧

    Tailwind 是一款流行的 CSS 框架,它提供了许多实用的类和工具,可以让我们轻松地构建自适应和响应式的页面。其中有一个非常实用的功能,那就是智能对齐技巧。本文将介绍 Tailwind 中的智能...

    4 天前
  • Vue.js 中 watch 理解和使用

    Vue.js 是一个构建用户界面的框架,其核心是响应式的数据绑定系统。在 Vue.js 中,我们可以使用 computed 计算属性和 watch 监听属性的变化。

    4 天前
  • Express.js 如何处理文件上传请求?

    在 Web 开发中,文件上传是一个常见的需求,比如用户上传头像、上传照片等。在 Node.js 的 Web 开发框架中,Express.js 是最常用的框架之一,它提供了多种处理文件上传请求的方式。

    4 天前
  • 无障碍设计:如何为视觉障碍人士设计网站?

    随着互联网的快速发展,网站开发变得越来越普及,而无障碍设计也越来越受到关注。随着无障碍性逐渐成为搜索引擎规范的一部分,了解如何为视觉障碍人士设计网站将变得越来越重要。

    4 天前
  • Headless CMS 技术在金融领域中的安全实现和应用

    随着互联网行业的快速发展,前端开发技术也不断更新,其中 Headless CMS 技术越来越受到大家的关注。它的本质是将后端内容管理与前端展示分离开来,使得前端开发者能够更加专注于页面的实现和用户体验...

    4 天前
  • 如何使用 MongoDB 实现自动化测试?

    自动化测试在前端开发中扮演着关键的角色。而在使用自动化测试时,如何有效地存储和管理测试数据是一个非常重要的问题。本文将为你介绍如何使用 MongoDB 实现自动化测试,并为你提供示例代码和指导意义。

    4 天前

相关推荐

    暂无文章