ECMAScript 2021 (ES12) 中的 globalThis、this 和 window 的区别

在前端开发中,我们经常需要使用 JavaScript 进行编程。JavaScript 的版本很多,其中最新的是 ECMAScript 2021(也称为 ES12)。ES12 中有三个非常重要的全局对象,它们是 globalThis、this 和 window。虽然它们很相似,但它们之间存在很大的区别。本文将详细介绍它们之间的区别,并给出一些示例代码。

globalThis

globalThis 是在 ES11 中引入的全局对象,它提供了一种可以在任意执行上下文中访问全局对象的标准化方式。它可以用来代替之前的全局对象(如 window、self、global 等),以解决多种执行上下文中的全局对象不同的问题。

我们可以使用以下代码访问 globalThis:

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

使用 globalThis 的好处在于我们可以在任何执行上下文中使用它,而不需要关心当前执行上下文是什么。例如,在浏览器中,它将返回 window 对象,在 Node.js 环境中,它将返回 global 对象。

this

this 是 JavaScript 中的一个关键字,用于表示当前执行上下文的对象。在全局作用域中,this 代表 window 对象。在函数中,this 代表函数调用的对象。在对象方法中,this 代表调用该方法的对象。

下面是一个示例代码:

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

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

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

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

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

window

window 是浏览器中的一个全局对象,它代表当前打开的浏览器窗口。window 对象包含了浏览器窗口的各种属性和方法,如浏览器窗口的大小、网页的地址,以及浏览器窗口的打开和关闭等。如果我们在非浏览器环境下使用 window,它将会是 undefined。

下面是一个示例代码:

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

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

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

globalThis vs. this vs. window

globalThis、this 和 window 之间的最大区别在于它们所代表的对象不同。globalThis 代表当前的全局作用域,可以在任何执行上下文中使用;this 代表当前执行上下文的对象,可以用来访问该对象的属性和方法;而 window 仅仅是浏览器中的一个全局对象,只能在浏览器中使用。

我们可以通过将 this 或者 window 赋值给一个变量,来将它们赋值给全局对象。但这样做是不可取的,因为它们只是在当前执行上下文中是全局对象,而在其他执行上下文中不一定是全局对象。

总结

在本文中,我们详细介绍了 ES12 中的 globalThis、this 和 window,包括这三者之间的区别以及使用它们的方法。了解它们之间的差异可以帮助我们更好地理解 JavaScript 中的对象和作用域,并且在编写 JavaScript 代码的时候更加得心应手。

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


猜你喜欢

  • CSS Flexbox 新属性 justify-self 详解

    随着现代网页设计的需求不断变化,CSS 的发展也在不断地推陈出新。其中,Flexbox 布局技术是近年来前端开发者们最为热门的话题之一。而其中的新属性 justify-self 也给 Flexbox ...

    1 年前
  • Babel 编译 ES6 代码后运行出现 “Cannot read property'symbol' of undefined” 错误的解决方案

    前言 在前端开发中,我们经常会使用到 ES6 的语法,并且由于部分浏览器不支持 ES6,我们需要使用 Babel 来将 ES6 代码转译成 ES5 代码,以保证代码在现代浏览器上的正常运行。

    1 年前
  • 如何为 GraphQL Schema 命名枚举字段

    在 GraphQL 中,枚举类型是一个常见的数据类型,它表示一组固定的可能的值。使用枚举类型可以使你的代码更加清晰、认知负载更小,并且可以提高类型检查的准确性。然而,如果你在命名枚举字段方面处理不当,...

    1 年前
  • ECMAScript 2018 中 Symbol 原始数据类型深入解析

    在 ECMAScript 2015 规范中,Symbol是一种新增的基本数据类型,它并不是字面量,而是一种独特的原始数据类型,用以表示代码中的唯一标识符。在 ECMAScript 2018 版本中,S...

    1 年前
  • Unity 性能优化 —— 顶点数据优化篇

    前言:在 Unity 开发中,优化游戏性能是非常重要的一步。本文将重点介绍 Unity 中的顶点数据优化,以提升游戏的帧率和运行速度。 为什么需要进行顶点数据优化? 在 3D 游戏开发中,顶点数据是非...

    1 年前
  • RESTful API 中如何处理超时问题

    RESTful API 是现代 web 开发中使用广泛的一种设计风格,它将资源和操作分别映射到 HTTP 协议的 GET、POST、PUT、DELETE 操作上,使得 web 应用的开发变得更加简单和...

    1 年前
  • Mocha 测试框架中出现的 ““exports is not defined” 问题的解决方案

    问题概述 在使用 Mocha 测试框架时,有时会出现 “exports is not defined” 的问题。这是因为在浏览器端 JavaScript 中,没有该模块,所以无法识别。

    1 年前
  • React 中使用 TypeScript 进行开发的详解

    TypeScript 是 Microsoft 推出的 JavaScript 的超集,它能够在代码层面上帮助开发者消除类型错误,提高代码可维护性和可读性。React 作为现今最受欢迎的 Web 前端框架...

    1 年前
  • Angular 中使用 RxJS 实现路由监听

    在 Angular 应用中,路由是非常重要的部分,因为它决定了用户在应用程序中所浏览的页面。实现路由监听是非常方便的,Angular 内置了一个路由模块,而 RxJS 是 Angular 中非常重要的...

    1 年前
  • 使用 SASS 提升前端代码的可维护性

    前端开发是一个不断发展的领域,为了提高代码的可维护性和可重用性,各种工具层出不穷。其中,SASS 是一种比较好的工具,它可以让代码更加有组织、易于管理,并且减少了一些冗长的代码。

    1 年前
  • AngularJS 单页面应用中的性能优化指南

    在当今的单页面应用开发中,AngularJS 是最流行的前端框架之一。尽管 AngularJS 在创建高性能应用方面提供了大量的功能,但是在应用复杂度增加时,性能问题也会相应增加。

    1 年前
  • ECMAScript 2017 中的并行处理:更好的性能和代码简化

    在现代前端开发中,良好的性能是不可或缺的。在处理大量数据和复杂算法时,常常需要使用并行处理来优化性能。在 ECMAScript 2017 中,我们得到了更好的并行处理支持,帮助我们更轻松地实现这个目标...

    1 年前
  • ES6 中的新特性:模块加载器 System.js

    随着前端技术的不断发展,模块化的开发方式受到了越来越多的关注。ES6 提供了一种新的模块化方案,使得开发者可以更加方便地管理和组织代码。但是,ES6 的模块化方案并不能在所有浏览器中运行,因此就需要一...

    1 年前
  • 在使用 Express.js 时应该如何设计 API?

    Express.js 是 Javascript 中一款流行的 web 应用框架,它能够快速地搭建一个 web 服务器,以便提供接口服务,对前端开发人员而言,深入理解 Express.js 的 API ...

    1 年前
  • 如何在 Jest 测试中测试 DOM 元素的属性

    如何在 Jest 测试中测试 DOM 元素的属性 前端开发中,Jest 是一个非常流行的单元测试框架,可以用于测试 JavaScript 应用程序的各个方面。在此基础上,很多开发者需要测试 DOM 元...

    1 年前
  • Material Design 在哪些场景下不适合使用?

    介绍 Material Design 是谷歌官方推出的一种视觉设计语言,旨在为移动设备和网络应用程序提供统一的外观和感觉。通过简单的、平面化的设计,将使用者的体验减到最小,提高设计的效果和效率。

    1 年前
  • Kubernetes 中的亲和性和反亲和性特性

    Kubernetes 是一个开源的容器编排系统,它可以轻松管理并部署容器化应用程序。Kubernetes 的核心思想在于将应用程序的运行时环境打包成一个容器,并以高可用和扩展的方式进行部署和管理。

    1 年前
  • 如何在 PWA 应用中处理 SEO 问题?

    什么是 PWA? PWA(Progressive Web App)是一种通过 Web 标准实现的应用程序,与 Native 应用相比,它具有更快的加载速度、更好的访问性能、良好的通知体验和离线访问功能...

    1 年前
  • CSS Reset 的妙用:实现根据页面大小自适应的字体大小

    前言 在编写网页时,我们通常都会使用 CSS 来控制页面的样式和排版。不过,不同的浏览器对 CSS 样式的解析不尽相同,导致同一份 CSS 代码在不同的浏览器中显示效果也不同。

    1 年前
  • 使用 Docker Swarm 搭建高可用集群

    Docker Swarm 是 Docker 官方基于 Docker 容器技术实现的容器集群管理工具,它提供了容器调度、服务发现、负载均衡、故障恢复等功能,可以帮助开发者搭建高可用性的应用集群。

    1 年前

相关推荐

    暂无文章